:root{--ink: #16120c;--ink-2: #1e1912;--paper: #e9dcbe;--paper-2: #ddcda8;--vermillion: #c8452f;--gold: #b98f3e;--blue: #4da3ff;--blue-deep: #1d5fa8;--red: #ff6a5c;--red-deep: #b03428;--text: #f2ebda;--text-dim: rgba(242, 235, 218, .66);--text-faint: rgba(242, 235, 218, .4);--line: rgba(233, 220, 190, .12);--serif: "DM Serif Display", Georgia, serif;--sans: "DM Sans", system-ui, sans-serif;--mono: "DM Mono", ui-monospace, monospace}*{margin:0;padding:0;box-sizing:border-box}html,body,#root{height:100%}body{font-family:var(--sans);color:var(--text);background:var(--ink);-webkit-font-smoothing:antialiased}body:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;z-index:-1;background:radial-gradient(1100px 700px at 50% -10%,#322717 0%,transparent 62%),radial-gradient(900px 600px at 85% 110%,#281d11 0%,transparent 58%),var(--ink)}button{font-family:inherit;cursor:pointer}input{font-family:inherit}.landing{min-height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;padding:32px 20px}.landing .torii{color:var(--vermillion);margin-bottom:10px}.landing h1{font-family:var(--serif);font-size:clamp(44px,8vw,64px);font-weight:400;letter-spacing:.06em;color:var(--text)}.landing .tag{font-size:14px;color:var(--text-dim);letter-spacing:.28em;text-transform:uppercase;margin:6px 0 40px}.panel{width:min(360px,100%);display:flex;flex-direction:column;gap:12px}.field{width:100%;background:#e9dcbe0d;border:1px solid var(--line);border-radius:10px;padding:12px 14px;font-size:15px;color:var(--text);outline:none;transition:border-color .15s}.field:focus{border-color:#c8452f99}.field::placeholder{color:var(--text-faint)}.field.code{font-family:var(--mono);letter-spacing:.35em;text-transform:uppercase;text-align:center}.btn{border:none;border-radius:10px;padding:13px 18px;font-size:15px;font-weight:700;transition:transform .1s,filter .15s}.btn:hover{filter:brightness(1.12)}.btn:active{transform:translateY(1px)}.btn:disabled{opacity:.45;cursor:default;filter:none}.btn.primary{background:var(--vermillion);color:#fff4ec}.btn.ghost{background:#e9dcbe0f;border:1px solid var(--line);color:var(--text-dim)}.divider{display:flex;align-items:center;gap:12px;color:var(--text-faint);font-size:11px;letter-spacing:.2em;text-transform:uppercase;margin:10px 0}.divider:before,.divider:after{content:"";flex:1;height:1px;background:var(--line)}.err{color:var(--red);font-size:13px;text-align:center;padding:9px 12px;border:1px solid rgba(255,106,92,.3);background:#ff6a5c12;border-radius:9px}.ratingchip{margin-top:26px;font-size:13px;color:var(--text-dim);border:1px solid var(--line);border-radius:999px;padding:7px 16px;background:#e9dcbe0a}.ratingchip .r{font-family:var(--mono);font-weight:500;color:var(--gold)}.footnote{margin-top:48px;font-size:12px;color:var(--text-faint)}.footnote a{color:var(--text-dim);text-decoration:none}.waiting{min-height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:32px 20px;text-align:center}.waiting .label{font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--text-dim)}.waiting .code{font-family:var(--mono);font-size:clamp(44px,10vw,72px);letter-spacing:.28em;padding-left:.28em;color:var(--paper);margin:6px 0 4px}.waiting .hint{color:var(--text-dim);font-size:14px;margin-bottom:22px}.pulse{width:9px;height:9px;border-radius:50%;background:var(--gold);display:inline-block;margin-right:8px;animation:pulse 1.6s ease-in-out infinite}@keyframes pulse{0%,to{opacity:.35}50%{opacity:1}}.game{min-height:100%;display:flex;flex-direction:column;align-items:center;padding:14px 16px 28px}.topbar{width:100%;max-width:860px;display:flex;align-items:center;gap:10px;padding-bottom:12px}.topbar .brand{display:flex;align-items:center;gap:8px;font-family:var(--serif);font-size:19px;letter-spacing:.04em}.topbar .brand svg{color:var(--vermillion)}.chip{font-family:var(--mono);font-size:12px;letter-spacing:.18em;color:var(--text-dim);background:#e9dcbe0d;border:1px solid var(--line);border-radius:7px;padding:5px 10px}.chip.click{cursor:pointer}.chip.click:hover{color:var(--text);border-color:#e9dcbe4d}.arena{display:flex;gap:26px;align-items:flex-start;justify-content:center;flex-wrap:wrap}.boardcol{display:flex;flex-direction:column;align-items:center;gap:9px}.playerline{width:100%;display:flex;align-items:center;gap:9px;font-size:14px;font-weight:500;padding:0 4px}.playerline .dot{width:11px;height:11px;border-radius:50%;flex-shrink:0}.playerline .you{font-size:10px;font-family:var(--mono);color:var(--gold);letter-spacing:.1em}.playerline .elo{font-family:var(--mono);font-size:11.5px;color:var(--text-faint)}.playerline .tomove{font-size:11px;color:#63d68a;margin-left:auto}.board{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:repeat(5,minmax(0,1fr));width:min(430px,92vw,56vh);aspect-ratio:1 / 1;border-radius:10px;overflow:hidden;border:3px solid #33291a;box-shadow:0 18px 50px #0000008c,0 2px 10px #0006}.sq{position:relative;display:flex;align-items:center;justify-content:center}.sq.clickable{cursor:pointer}.sq .dotmove{position:absolute;width:26%;height:26%;border-radius:50%;background:#3c2d1452;pointer-events:none}.sq .ring{position:absolute;top:5%;right:5%;bottom:5%;left:5%;border-radius:50%;border:4px solid rgba(200,69,47,.55);pointer-events:none}.hand{display:flex;gap:12px}.hand.opp{transform:rotate(180deg)}.hand.opp .card:first-child{transform:rotate(5deg) translateY(2px)}.hand.opp .card:last-child{transform:rotate(-5deg);margin-left:-16px}.handwrap{position:relative;width:340px;max-width:92vw;height:160px;margin-top:2px}.handcard{position:absolute;left:50%;bottom:4px;transform-origin:50% 135%;transform:translate(calc(-50% + var(--hx, 0px))) translateY(var(--hy, 0px)) rotate(var(--hr, 0deg));transition:transform .42s cubic-bezier(.22,1,.36,1);will-change:transform}.handcard.sel{z-index:3}.handcard.raisable:hover{z-index:4;transform:translate(calc(-50% + var(--hx, 0px))) translateY(calc(var(--hy, 0px) - 16px)) rotate(calc(var(--hr, 0deg) * .55))}.handcard button.card:hover,.handcard .card.sel{transform:none}.handcard.entering{animation:cardDraw .55s cubic-bezier(.22,1,.36,1) backwards;animation-delay:.12s}@keyframes cardDraw{0%{transform:translate(calc(-50% + 190px)) translateY(-130px) rotate(30deg) scale(.85);opacity:0}}.handcard.leaving,.handcard.leaving-side{pointer-events:none;z-index:5}.handcard.leaving{animation:cardPlay .5s cubic-bezier(.45,0,.75,.4) forwards}@keyframes cardPlay{to{transform:translate(calc(-50% + var(--hx, 0px) * .3)) translateY(-290px) rotate(0) scale(.6);opacity:0}}.handcard.leaving-side{animation:cardPass .5s ease-in forwards}@keyframes cardPass{to{transform:translate(calc(-50% + 200px)) translateY(-120px) rotate(28deg) scale(.85);opacity:0}}.card{display:flex;flex-direction:column;align-items:center;gap:6px;padding:9px 13px 11px;background:linear-gradient(168deg,#f3ead2,#e7d9b8);border:1.5px solid rgba(90,70,40,.4);border-radius:10px;box-shadow:0 4px 10px #00000059;transition:transform .12s,box-shadow .12s,opacity .12s}button.card:hover{transform:translateY(-3px)}.card.sel{border-color:var(--vermillion);box-shadow:0 0 0 2.5px #c8452f80,0 8px 18px #00000073;transform:translateY(-3px)}.card.dim{opacity:.55}.card.dim:hover{transform:none}.card .head{display:flex;align-items:center;gap:6px}.card .stamp{width:6px;height:6px;border-radius:50%;border:1px solid rgba(0,0,0,.35)}.card .name{font-family:var(--serif);font-size:13px;color:#43351c;letter-spacing:.05em}.card.small{padding:6px 9px 8px;gap:4px}.card.small .name{font-size:10px}.cgrid{display:grid;gap:1.5px}.cgrid div{border-radius:2px}.banner{padding:8px 16px;border-radius:9px;font-size:13px;font-weight:500;border:1px solid rgba(185,143,62,.4);background:#b98f3e1a;color:var(--gold);display:flex;align-items:center;gap:10px}.banner .btn{padding:6px 12px;font-size:12px}.rail{width:190px;display:flex;flex-direction:column;gap:12px}.railbox{border:1px solid var(--line);border-radius:11px;background:#e9dcbe09;padding:12px 14px}.railbox .k{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--text-faint);margin-bottom:7px}.railbox .v{font-size:15px;font-weight:700}.railbox .sub{font-size:12px;color:var(--text-dim);margin-top:3px}.railbox.center{display:flex;flex-direction:column;align-items:center}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:50;background:#0c0905b8;display:flex;align-items:center;justify-content:center;animation:fadein .25s ease}@keyframes fadein{0%{opacity:0}to{opacity:1}}.overlay .box{background:var(--ink-2);border:1px solid var(--line);border-radius:16px;padding:34px 40px;text-align:center;display:flex;flex-direction:column;gap:8px;align-items:center;box-shadow:0 30px 80px #0009}.overlay .box h2{font-family:var(--serif);font-size:30px;font-weight:400}.overlay .box .way{color:var(--text-dim);font-size:14px;margin-bottom:14px}.overlay .box .row{display:flex;gap:10px}.overlay .box .elodelta{font-family:var(--mono);font-size:17px;font-weight:500;margin:-6px 0 14px}.overlay .box .elodelta.up{color:#63d68a}.overlay .box .elodelta.down{color:var(--red)}@media(max-width:700px){.rail{width:100%;max-width:430px;flex-direction:row}.rail .railbox{flex:1}}