/* Card Toybox — thick ivory cards on a tactile felt and honey-wood table. */
:root{color-scheme:light;--ink:#365f55;--accent:#327c70;--cream:#fff8e5;--gold:#c79750}html,body{background:#e8d4ae;color:var(--ink)}
.screen{background:radial-gradient(ellipse at 20% 0,#fffef6,#fbf0d7 60%,#e4e9ce);color:var(--ink);padding:72px 22px 32px;gap:14px;justify-content:flex-start}.screen>*{max-width:100%;flex-shrink:0}.toy-hero{width:min(440px,100%);height:auto;aspect-ratio:3/2;object-fit:cover;border:7px solid #fffdf2;border-radius:32px;box-shadow:0 7px 0 #d9c5a0,0 18px 40px #8d6b3d22;margin-bottom:8px}.sub{font-size:10px;color:#81916f;letter-spacing:.14em}.ttl{background:none;color:var(--accent);filter:none;text-shadow:0 3px 0 #fff;font-size:clamp(35px,8vw,54px);letter-spacing:.035em}.ttl br{display:none}.rules{background:#fffdf2;border:1px solid #e1d3b2;box-shadow:0 5px 0 #dfd0ae;color:#607760;border-radius:22px;padding:16px 20px;line-height:1.9;font-size:13px}.rules b{color:#916b35}.rules li::before{color:#bb9349}.btn{background:linear-gradient(150deg,#efd194,#d4a45a);color:#6a4c27;border:1px solid #ffe6ae;border-radius:19px;box-shadow:0 6px 0 #a4773c,0 14px 25px #bda26630;padding:16px 30px;font-size:19px;letter-spacing:.05em;min-height:52px;white-space:normal;max-width:100%}.btn:active{box-shadow:0 2px 0 #a4773c;transform:translateY(4px)}.btn.ghost{background:#fffaf0;color:#6c8062;border:1px solid #d3d6b8;border-radius:15px;box-shadow:0 3px 0 #cbd0b0;min-height:44px}.beststat{font-size:12px;color:#869272;line-height:1.8}
.corner,.plaza{background:linear-gradient(#fffdf0,#efdfbc);color:#677858;border:1px solid #e4d5ad;box-shadow:0 3px 0 #a89d7355;border-radius:12px;top:12px;min-height:40px}.plaza{position:absolute;left:14px;top:12px;font-size:12px;letter-spacing:0}.corner#mute{right:12px;width:40px}.corner#quitBtn{right:60px;font-size:11px}.corner.off{color:#a5a388}#hud{left:12px;top:10px;gap:6px;max-width:calc(100% - 126px)}.stat{background:linear-gradient(#fffdf1,#efdfb9);color:#55765d;border:1px solid #fff9;box-shadow:0 3px 0 #667a5133;border-radius:13px;padding:7px 11px}.stat .lbl{font-size:8px;color:#687451;letter-spacing:.02em}.stat .val{font-size:16px;color:#46735d}#pick{position:absolute;gap:12px;bottom:calc(22px + env(safe-area-inset-bottom));padding:0 18px}.pbtn{border-radius:18px;min-height:60px;font-size:18px;letter-spacing:.04em;border:1px solid #ffffff88!important}.pbtn span{font-size:10px;opacity:.76}.pbtn[disabled]{opacity:.5}#hitBtn{background:linear-gradient(#9fd3b3,#5b9e7f);color:#173f33;box-shadow:0 6px 0 #39705c,0 12px 24px #354f3626}#standBtn{background:linear-gradient(#f4c395,#d79468);color:#5a3724;box-shadow:0 6px 0 #9e6749,0 12px 24px #354f3626}#drawBtn{background:linear-gradient(#83c5b8,#3a9182);color:#123e36;box-shadow:0 6px 0 #276b60,0 12px 25px #354f3626;max-width:430px}
.rttl{color:var(--accent)}.rbig{color:#b68643;text-shadow:0 3px 0 #fff}.rbig small{color:#80906d}.rcm{color:#708566;max-width:100%;line-height:1.8}.rstats>div{background:#fffdf2;border:1px solid #dfd5b5;border-radius:22px;box-shadow:0 4px 0 #d9ccaa;padding:14px 18px}.rstats b{color:var(--accent);font-size:24px}.rstats span{color:#8a9675;font-size:10px}.card-medal{font-size:50px;color:#fff5d8;width:100px;height:100px;border-radius:24px;background:linear-gradient(135deg,#ecd194,#c99b54);border:3px solid #ffe3a3;box-shadow:0 7px 0 #a9844b,0 17px 30px #a6884525;display:grid;place-items:center;transform:rotate(-7deg);margin:20px 0 13px;text-shadow:0 2px 0 #a4773c}
.table-label{position:absolute;left:50%;transform:translateX(-50%);z-index:4;pointer-events:none;color:#fff8db;background:#234f4255;border:1px solid #dcd99d55;border-radius:999px;padding:5px 14px;font-size:12px;font-weight:850;white-space:nowrap}.table-label[hidden]{display:none}#tableStatus{background:#fff5dce8;color:#56704d;border:1px solid #dcc799;border-radius:18px;white-space:normal;text-align:center;width:min(360px,calc(100% - 40px));padding:13px 18px;font-size:15px;line-height:1.7;box-shadow:0 5px 0 #203f3130}#handSelection{position:absolute;left:14px;right:14px;bottom:110px;z-index:4;pointer-events:none;text-align:center;color:#fff2cf;font-size:11px;font-weight:800;line-height:1.7}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.rw-back{background:#fffdf2!important;color:#517654!important;border-color:#c6d2b7!important;box-shadow:0 4px 0 #cad1b7;border-radius:16px!important}#title[data-rw-lock="1"]>div:last-of-type{color:#748366!important}#rw-lock>div{background:linear-gradient(#fffdf3,#f4e8cc)!important;border:1px solid #decea9!important;color:#627557!important;border-radius:27px!important}#rw-lock>div>div,#rw-lock button{color:#748366!important}#rw-lock a{color:#627557!important}#oj-gate{background:radial-gradient(#fffdf2,#f2e4c6)!important;color:#627557!important}#oj-gate>div>div{color:#627557!important}
@media(min-width:850px) and (min-height:650px){#title{display:grid;grid-template-columns:minmax(330px,480px) minmax(300px,440px);grid-template-rows:repeat(5,auto);gap:15px 42px;align-content:center}#title .toy-hero{grid-column:1;grid-row:1/6;aspect-ratio:1;width:100%;max-width:none;margin:0}#title .sub{grid-column:2;grid-row:1}#title .ttl{grid-column:2;grid-row:2}#title .rules{grid-column:2;grid-row:3}#startBtn{grid-column:2;grid-row:4}#tbest{grid-column:2;grid-row:5}.screen:not(#title){justify-content:center}}
@media(max-width:480px){.screen{gap:12px;padding:69px 19px 28px}.toy-hero{width:325px;border-width:5px;border-radius:27px}.ttl{font-size:35px}.rules{font-size:12px;padding:13px 16px}.btn{font-size:17px}.stat{padding:7px 9px}.pbtn{font-size:17px}}
@media(prefers-reduced-motion:reduce){.screen{animation:none}}

/* Center the message inside the actual gap between the two hands. */
#tableStatus{transform:translate(-50%,-50%)}
@media(max-height:640px){#tableStatus{font-size:13px;line-height:1.5;padding:8px 12px}}