:root{--paper:#fbfaf6;--ink:#15131a;--tone:#f4e9a3;--tone-dot:#d6c56a;--lv1:#f2902c;--lv2:#a57cd8;--lv3:#e0546b;--lv4:#2f9e4f;--lv5:#5262cf;--font-display:"Dela Gothic One", "IBM Plex Sans Thai", system-ui, sans-serif;--font-body:"IBM Plex Sans Thai", "Noto Sans JP", system-ui, sans-serif;--card-w:112px}*,:before,:after{box-sizing:border-box}html,body{background:var(--paper);height:100%;color:var(--ink);font-family:var(--font-body);-webkit-font-smoothing:antialiased;margin:0;overflow:hidden}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.paper{background:radial-gradient(ellipse 46% 42% at 50% 52%, var(--paper) 55%, transparent 100%), repeating-conic-gradient(from 3deg at 50% 52%, #15131a1c 0deg .7deg, transparent .7deg 4.3deg), var(--paper);position:fixed;inset:0}#scene{touch-action:none;width:100%;height:100%;display:block;position:fixed;inset:0}.leaders{pointer-events:none;width:100%;height:100%;position:fixed;inset:0}.leaders .leader-under{fill:none;stroke:var(--ink);stroke-width:5px;stroke-linejoin:round;stroke-linecap:round}.leaders .leader-over{fill:none;stroke:var(--paper);stroke-width:2.4px;stroke-linejoin:round;stroke-linecap:round}.leaders .leader-dot{fill:var(--paper);stroke:var(--ink);stroke-width:2px}.overlay{pointer-events:none;grid-template:"top title"". ."1fr"log bottom"/1fr auto;gap:12px;padding:14px 16px;display:grid;position:fixed;inset:0}.overlay>*{pointer-events:auto}.cards{align-items:flex-start;gap:8px;display:flex}.cards--top{grid-area:top;justify-self:start}.cards--bottom{grid-area:bottom;place-self:end}.card{width:var(--card-w);border:2.5px solid var(--ink);background:var(--paper);font:inherit;color:inherit;text-align:center;cursor:pointer;box-shadow:3px 3px 0 var(--ink);flex-direction:column;flex:none;gap:3px;padding:3px;transition:transform .16s,box-shadow .16s,filter .3s;display:flex;position:relative}.card:hover,.card:focus-visible{box-shadow:4px 5px 0 var(--ink);outline:none;transform:translate(-1px,-2px)}.card[aria-pressed=true]{box-shadow:5px 7px 0 var(--ink);transform:translate(-2px,-4px)}.card[aria-pressed=true]:after{content:"";border:2.5px dashed var(--ink);pointer-events:none;position:absolute;inset:-7px}.card:disabled{cursor:default}.card-head{border:2px solid var(--ink);color:var(--paper);text-shadow:-1px -1px 0 var(--ink), 1px -1px 0 var(--ink), -1px 1px 0 var(--ink), 1px 1px 0 var(--ink);line-height:1.05;font-family:var(--font-display);flex-direction:column;align-items:center;padding:2px 2px 1px;display:flex}.card-head[data-lv="1"]{background:var(--lv1)}.card-head[data-lv="2"]{background:var(--lv2)}.card-head[data-lv="3"]{background:var(--lv3)}.card-head[data-lv="4"]{background:var(--lv4)}.card-head[data-lv="5"]{background:var(--lv5)}.card-name{letter-spacing:-.03em;white-space:nowrap;font-size:10px}.card-lv{letter-spacing:.04em;font-size:19px}.card-lv ruby{ruby-position:over}.card-lv rt{letter-spacing:.1em;font-size:7px;font-family:var(--font-display)}.card-art{border:2px solid var(--ink);aspect-ratio:1/1.04;background:radial-gradient(circle, var(--tone-dot) 1.1px, transparent 1.5px) 0 0 / 6px 6px, radial-gradient(circle, var(--tone-dot) 1.1px, transparent 1.5px) 3px 3px / 6px 6px, var(--tone);justify-content:center;align-items:flex-end;display:flex;position:relative;overflow:hidden}.card-art img{object-fit:contain;object-position:center bottom;width:108%;height:108%;display:block}.card-stamp{font-family:var(--font-display);color:var(--lv3);text-shadow:-2px -2px 0 var(--paper), 2px -2px 0 var(--paper), -2px 2px 0 var(--paper), 2px 2px 0 var(--paper);justify-content:center;align-items:center;font-size:26px;display:none;position:absolute;inset:0;transform:rotate(-14deg)}.card-ability{border:2px solid var(--ink);width:20px;height:20px;font-family:var(--font-display);background:#9fd3f0;border-radius:50%;place-items:center;font-size:11px;line-height:1;display:grid;position:absolute;top:3px;left:3px}.card-special{border:2px solid var(--ink);background:var(--lv3);width:20px;height:20px;color:var(--paper);font-family:var(--font-display);border-radius:50%;place-items:center;font-size:11px;line-height:1;display:grid;position:absolute;top:3px;right:3px}.card[data-special-used=true] .card-special{background:var(--paper);color:var(--ink);opacity:.55;text-decoration:line-through}.card-badge{border:2px solid var(--ink);background:var(--tone);font-family:var(--font-display);padding:2px 6px;font-size:11px;display:none;position:absolute;top:-10px;right:-10px;transform:rotate(8deg)}.card[data-dead=true]{filter:grayscale()contrast(.9);opacity:.75}.card[data-dead=true] .card-stamp{display:flex}.card[data-evolved=true] .card-badge{display:block}.panel{border:3px solid var(--ink);background:var(--paper);box-shadow:5px 5px 0 var(--ink);padding:12px 14px}.panel--title{flex-direction:column;grid-area:title;justify-self:end;gap:8px;width:280px;display:flex}.title-jp{font-family:var(--font-display);letter-spacing:-.02em;margin:0;font-size:18px;line-height:1.2}.title-th{letter-spacing:.08em;text-transform:uppercase;opacity:.7;margin:0;font-size:13px;font-weight:600}.turn{border:2px solid var(--ink);background:var(--tone);align-items:center;gap:8px;padding:6px 10px;font-size:15px;font-weight:700;display:flex}.turn-dot{border:2px solid var(--ink);background:var(--lv5);border-radius:50%;width:12px;height:12px}.turn[data-turn=mokuba] .turn-dot{background:var(--lv3)}.turn[data-winner]{background:var(--lv1)}.controls{flex-wrap:wrap;gap:6px;display:flex}.btn{border:2px solid var(--ink);background:var(--paper);color:var(--ink);font:inherit;cursor:pointer;box-shadow:2px 2px 0 var(--ink);flex:auto;padding:6px 10px;font-size:13px;font-weight:700;transition:transform .12s,box-shadow .12s}.btn:hover,.btn:focus-visible{box-shadow:3px 3px 0 var(--ink);outline:none;transform:translate(-1px,-1px)}.btn:active{box-shadow:1px 1px 0 var(--ink);transform:translate(1px,1px)}.btn[aria-pressed=false]{background:var(--tone)}.btn--ink{background:var(--ink);color:var(--paper)}.btn:disabled{opacity:.45;cursor:not-allowed;box-shadow:2px 2px 0 var(--ink);transform:none}.special{border:3px solid var(--ink);background:var(--lv3);color:var(--paper);font:inherit;text-align:left;cursor:pointer;box-shadow:4px 4px 0 var(--ink);grid-template-rows:auto auto;grid-template-columns:auto 1fr;align-items:center;column-gap:10px;padding:8px 12px;transition:transform .12s,box-shadow .12s;animation:1.1s ease-in-out infinite special-pulse;display:grid;position:relative}.special[hidden]{display:none}.special:hover,.special:focus-visible{box-shadow:6px 6px 0 var(--ink);outline:none;transform:translate(-2px,-2px)}.special:active{box-shadow:1px 1px 0 var(--ink);transform:translate(2px,2px)}.special-kanji{font-family:var(--font-display);color:var(--tone);-webkit-text-stroke:1px var(--ink);paint-order:stroke fill;grid-row:1/span 2;font-size:22px;line-height:1;transform:rotate(-6deg)}.special-name{font-size:13px;font-weight:700;line-height:1.25}.special-hint{opacity:.9;font-size:11px;font-weight:600}@keyframes special-pulse{0%,to{background:var(--lv3)}50%{background:#c43a52}}.btn--replay,.btn--replay[aria-pressed=false]{background:var(--lv1);flex-basis:100%}.btn--replay[aria-pressed=true]{background:var(--ink);color:var(--paper)}.panel--log[data-replay] .log-title,.panel--log[data-replay] .log-rules{display:none}.caption{flex-direction:column;gap:8px;display:flex}.caption[hidden]{display:none}.caption-head{justify-content:space-between;align-items:center;gap:8px;display:flex}.caption-speaker{border:2px solid var(--ink);background:var(--ink);color:var(--paper);font-family:var(--font-display);padding:2px 10px;font-size:13px}.caption[data-speaker=yugi] .caption-speaker{background:var(--lv5)}.caption[data-speaker=mokuba] .caption-speaker{background:var(--lv3)}.caption-progress{font-variant-numeric:tabular-nums;font-size:12px;font-weight:700}.caption-line{border:2.5px solid var(--ink);text-wrap:pretty;background:#fff;border-radius:16px;margin:0 0 6px;padding:10px 12px;font-size:15px;font-weight:700;line-height:1.5;position:relative}.caption-line:after{content:"";border-right:2.5px solid var(--ink);border-bottom:2.5px solid var(--ink);background:#fff;width:16px;height:16px;position:absolute;bottom:-11px;left:22px;transform:skew(30deg)rotate(45deg)}.caption[data-speaker=narrator] .caption-line{background:var(--tone);border-radius:0}.caption[data-speaker=narrator] .caption-line:after{display:none}.caption-line.is-new{animation:.26s ease-out caption-pop}@keyframes caption-pop{0%{opacity:.4;transform:scale(.94)}}@media (prefers-reduced-motion:reduce){.caption-line.is-new{animation:none}}.caption-actions{gap:6px;display:flex}.caption-actions .btn[hidden]{display:none}.panel--log{flex-direction:column;grid-area:log;place-self:end start;gap:6px;width:min(360px,100%);display:flex}.log-title{font-family:var(--font-display);margin:0;font-size:13px}.log-rules{text-wrap:pretty;margin:0;font-size:13px;line-height:1.55}.log-rules strong{font-family:var(--font-display);background:var(--tone);border:1px solid var(--ink);padding:0 3px;font-weight:400}.log{border-top:2px dashed var(--ink);flex-direction:column;gap:2px;min-height:3.2em;margin:0;padding:6px 0 0;font-size:13px;line-height:1.45;list-style:none;display:flex}.log li:first-child{font-weight:700}.log li:not(:first-child){opacity:.6}.burst{opacity:0;pointer-events:none;text-align:center;min-width:220px;font-family:var(--font-display);color:var(--ink);background:var(--ink);clip-path:polygon(50% 0%,58% 18%,75% 4%,74% 24%,96% 16%,84% 36%,100% 46%,84% 56%,98% 76%,76% 72%,78% 96%,60% 80%,50% 100%,41% 81%,22% 96%,24% 73%,2% 78%,16% 57%,0% 46%,16% 36%,4% 16%,25% 24%,24% 3%,41% 18%);padding:44px 54px;font-size:30px;line-height:1.15;transition:transform .26s cubic-bezier(.2,1.6,.4,1),opacity .2s;position:fixed;top:46%;left:50%;transform:translate(-50%,-50%)scale(.2)rotate(-8deg)}.burst:before{content:"";background:var(--tone);clip-path:inherit;z-index:-1;position:absolute;inset:5px}.burst>span{display:block;position:relative}.burst small{font-family:var(--font-body);margin-top:4px;font-size:14px;font-weight:700;display:block}.burst.is-on{opacity:1;transform:translate(-50%,-50%)scale(1)rotate(-4deg)}.loading{background:var(--paper);font-family:var(--font-display);justify-content:center;align-items:center;font-size:22px;transition:opacity .4s;display:flex;position:fixed;inset:0}.loading.is-done{opacity:0;pointer-events:none}@media (width<=1100px){:root{--card-w:92px}.card-name{font-size:8.5px}.card-lv{font-size:16px}.panel--title{width:230px}.title-jp{font-size:15px}}@media (width<=760px){:root{--card-w:64px}.overlay{grid-template:"title""top""."1fr"bottom""log"/1fr;gap:8px;padding:10px}.cards{gap:5px}.cards--top,.cards--bottom{justify-self:center}.card{box-shadow:2px 2px 0 var(--ink);padding:2px}.card-name{display:none}.card-lv{font-size:13px}.card-ability,.card-special{border-width:1.5px;width:15px;height:15px;font-size:8px}.special{flex-basis:100%;padding:6px 10px}.special-kanji{font-size:17px}.special-hint{display:none}.btn{padding:5px 8px;font-size:12px}.panel{box-shadow:3px 3px 0 var(--ink);padding:8px 10px}.panel--title{flex-flow:wrap;align-items:center;width:100%}.title-th,.log-rules,.log-title{display:none}.panel--log{width:100%}.log{border-top:0;min-height:0;padding:0}.log li:not(:first-child){display:none}}@media (prefers-reduced-motion:reduce){.card,.btn,.special,.burst{transition:none}.special{animation:none}}