:root{--paper: #ffffff;--ink: #6a8d96;--ink-soft: #9bb8be}*{box-sizing:border-box;margin:0;padding:0}html,body,#app{width:100%;height:100%}html,body{overflow:hidden;background:var(--paper);color:var(--ink);font-family:Cormorant Garamond,Georgia,serif;-webkit-user-select:none;user-select:none}body:after{content:"";position:fixed;left:0;right:0;top:0;height:4vh;background:linear-gradient(to bottom,#fff 35%,#fff0);pointer-events:none;z-index:1}#app canvas{display:block;width:100%;height:100%}#flash{position:fixed;inset:0;pointer-events:none;z-index:1;opacity:0}#flash.win{--flash: rgba(63, 154, 107, .8)}#flash.lose{--flash: rgba(196, 82, 79, .8)}#flash.win,#flash.lose{background:radial-gradient(ellipse at center,transparent 25%,var(--flash));animation:flash 1.3s ease-out}@keyframes flash{0%{opacity:0}10%{opacity:1}35%{opacity:1}to{opacity:0}}#hud{position:fixed;inset:0;pointer-events:none;z-index:2}.panel{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;isolation:isolate;max-width:22rem;pointer-events:auto;transition:opacity 1.1s ease}.panel:before{content:"";position:absolute;inset:-3.5rem -6rem;z-index:-1;background:radial-gradient(closest-side,#fffc 20%,#fff0)}.panel.playing{opacity:0;pointer-events:none}.panel.result{opacity:1;pointer-events:auto}.mark{font-size:1.7rem;letter-spacing:.38em;text-transform:lowercase;color:var(--ink-soft);margin-bottom:.85rem}.line{font-size:1.15rem;line-height:1.45;font-style:italic;color:var(--ink);margin-bottom:1.4rem;transition:color .4s ease}.line:empty{display:none}.line[data-outcome=win]{color:#3f9a6b}.line[data-outcome=lose]{color:#c4524f}button{appearance:none;border:0;background:transparent;color:var(--ink-soft);font-family:inherit;font-size:.95rem;letter-spacing:.28em;text-transform:lowercase;cursor:pointer;padding:.4rem .2rem}button:hover{color:var(--ink)}body.playing{cursor:none}