:root{color:#f6e8cb;font-synthesis:none;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;background:#3f281c;font-family:ui-rounded,Avenir Next,system-ui,sans-serif}*{box-sizing:border-box}body{margin:0;overflow:hidden}button{font:inherit;cursor:pointer;color:inherit;touch-action:manipulation;background:#714a3066;border:1px solid #c29a6155;border-radius:10px}button:disabled{cursor:default;opacity:.45}button:focus-visible{outline-offset:2px;outline:2px solid #dfb25d}#app{max-width:540px;height:100dvh;padding:max(12px,env(safe-area-inset-top)) 14px max(10px,env(safe-area-inset-bottom));background:linear-gradient(#38221566,#38221511 40%,#24150877),url(../assets/kahvehane-table.jpg) 50%/cover;grid-template-rows:46px 90px minmax(125px,1.4fr) 66px minmax(165px,.85fr) 36px 108px;gap:9px;margin:auto;display:grid}header{justify-content:space-between;align-items:center;display:flex}header div{text-align:center}small{letter-spacing:2px;color:#dbc095;font-size:9px}h1{letter-spacing:3px;margin:2px 0;font-family:Georgia,serif;font-size:22px}h2{font-family:Georgia,serif}.icon{color:#f4dfb6;background:linear-gradient(#805936,#573621);border:1px solid #c3976155;width:40px;height:40px;font-size:26px;box-shadow:inset 0 1px #edc99344,0 3px #2e1c12}.players{grid-template-columns:repeat(3,1fr);gap:8px;display:grid}.player{color:#543923;background:#f2dfb7;border:1px solid #ac8459;border-radius:14px;flex-direction:column;justify-content:center;align-items:center;gap:4px;display:flex;position:relative;box-shadow:inset 0 1px #fff1d0,0 3px #482b19}.player b{text-overflow:ellipsis;white-space:nowrap;max-width:100%;font-size:12px;overflow:hidden}.player small{color:#886342;letter-spacing:0;font-size:10px}.player.active{background:#fff0cb;border-color:#e4bc70}.portrait{color:#593b26;background:linear-gradient(135deg,#c3a57b,#9c714e);border-radius:50%;place-items:center;width:38px;height:38px;font-weight:700;display:grid;position:relative;overflow:hidden}.portrait img{position:absolute}.portrait img.legacy{object-fit:cover;width:100%;height:100%}.speaking .portrait{box-shadow:0 0 0 3px #e0b64f}.table{background:radial-gradient(at 50% 20%,#547562,#345243);border:6px solid #93623a;border-radius:18px;flex-direction:column;min-height:0;padding:10px;display:flex;box-shadow:inset 0 0 0 1px #c0aa7466,inset 0 3px 15px #142f2266,0 4px #412515,0 7px 14px #25170b55}.table-label,.rack-label{letter-spacing:1px;color:#dec8a1;justify-content:space-between;font-size:9px;display:flex}.melds{flex-wrap:wrap;flex:1;align-items:center;gap:6px;min-height:30px;padding:5px 0;display:flex;overflow:auto}.empty{color:#c1b892;margin:auto;font-size:11px}.meld{border-radius:7px;gap:2px;padding:4px;display:flex}.draw-area{justify-content:center;align-items:center;gap:16px;display:flex}.draw-area #indicator{color:#dcc9a4;flex-direction:column;align-items:center;gap:3px;margin-right:auto;font-size:9px;display:flex}.draw-area #joker{margin-left:auto;font-size:11px;font-weight:700}.closed{color:#f8e6bb;background:repeating-linear-gradient(45deg,#765133,#765133 4px,#9e754b 4px 5px);border:2px solid #d2b582;width:40px;height:52px;font-size:25px;box-shadow:2px 3px #422819}.discard{background:0 0;border:none;flex-shrink:0;width:40px;padding:0}.turn{text-align:center;background:#4b2d1bc9;border:1px solid #c49d6966;border-radius:10px;flex-wrap:wrap;place-content:center;gap:8px;display:flex;position:relative;box-shadow:inset 0 1px #ebc58c22}.turn strong{letter-spacing:1px;color:#ffdf9d;font-family:Georgia,serif;font-size:16px}#timer{color:#edcf95;font-size:12px}.urgent{color:#f5c88e!important}.turn p{color:#ebd6b1;width:100%;margin:0;font-size:11px;line-height:1.4}.rack-wrap{filter:drop-shadow(0 5px 4px #25150866);background:0 0;border:none;flex-direction:column;min-height:0;padding:0;display:flex;position:relative}.rack-label{color:#e4c693;letter-spacing:.8px;margin-bottom:5px;padding:0 10px;font-size:8px}.rack{background:url(../assets/wooden-rack.webp) 50%/100% 100% no-repeat;flex:1;grid-template-rows:repeat(2,minmax(0,1fr));grid-template-columns:repeat(14,minmax(0,1fr));align-items:center;gap:3px 2px;min-height:0;padding:8px 12px 15px;display:grid;position:relative}.rack-slot{touch-action:none;background:0 0;border:0;justify-content:center;align-self:stretch;align-items:flex-end;padding:0 0 5px;transition:transform .3s;display:flex}.tile{color:#172338;background:linear-gradient(120deg,#fffaf0,#ede3d1);border:1px solid #fff6;border-radius:5px;justify-content:center;align-items:center;width:100%;min-width:0;max-width:40px;height:clamp(39px,6.4vh,58px);font-family:Georgia,serif;font-size:clamp(16px,4.6vw,22px);font-weight:600;display:inline-flex;position:relative;box-shadow:0 3px #b4a38e,1px 5px 5px #30190c66}.tile:after{content:"";opacity:.6;background:currentColor;border-radius:50%;width:4px;height:4px;position:absolute;bottom:6px}.red{color:#bc3946!important}.yellow{color:#97620b!important}.blue{color:#225bb0!important}.black{color:#233041!important}.fake{color:#74618e}.wild{outline-offset:-3px;outline:2px solid #bc8b43}.tile.mini{border-radius:3px;flex:none;width:21px;height:28px;font-size:15px}.mini:after{width:2px;height:2px;bottom:3px}.selected{transform:translateY(-6px)}.selected .tile{box-shadow:0 3px #b89554,0 0 12px #f8dc8a88}.grouped .tile{outline:2px solid #448474}.staged{align-items:center;gap:4px;min-height:24px;margin-top:7px;display:flex;overflow-x:auto}.staged button{white-space:nowrap;padding:4px 6px;font-size:9px}.utilities{gap:6px;display:flex}.utilities button{color:#5c3b25;background:linear-gradient(#f1dfbc,#d6b88a);border-color:#9e754c;flex:1;padding:7px 2px;font-size:10px;box-shadow:inset 0 1px #fff0ce,0 2px #56361f}footer{flex-direction:column;justify-content:end;align-items:center;min-height:0;display:flex}#hint,#error{text-align:center;color:#ebd6b1;min-height:13px;margin:2px 0;font-size:10px}#error{color:#ffd0ad}#primary,dialog>button{color:#fff0d1;letter-spacing:1px;background:linear-gradient(#bc7c4d,#985832);border:1px solid #cf9b60;width:100%;min-height:44px;font-weight:700;box-shadow:0 6px 20px #32180b44}#voice-status{color:#d9ba8e;height:14px;margin-top:5px;font-size:9px}dialog{color:#543721;text-align:center;background:#f0ddba;border:1px solid #9b7045;border-radius:24px;width:min(90vw,370px);padding:28px}dialog::backdrop{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background:#25170ebb}dialog button{margin-top:10px}dialog .secondary{color:#65452c;background:#ddc397}#scores p{color:#6a462d;border-bottom:1px solid #ffffff0a;justify-content:center;padding:8px;font-size:14px;display:flex}.pulse{animation:1.5s ease-in-out infinite pulse}@keyframes pulse{50%{box-shadow:0 0 20px #ebc35f88}}.rack-slot{animation:.3s ease-out arrive}.meld{animation:.4s ease-out arrive}@keyframes arrive{0%{opacity:.2;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@media (height<=720px){#app{grid-template-rows:38px 76px minmax(108px,1.2fr) 57px minmax(135px,.8fr) 30px 87px;gap:5px;padding-top:8px;padding-bottom:5px}.portrait{width:30px;height:30px}.table{padding:8px}.rack-label{margin-bottom:4px}.tile{height:clamp(34px,6.7vh,48px)}.turn p{font-size:10px}#primary{min-height:39px}.staged{min-height:21px}.draw-area{gap:12px}}@media (height<=580px){#app{grid-template-rows:32px 60px minmax(85px,1fr) 44px minmax(112px,1.3fr) 27px 70px;gap:3px}.tile{height:32px}.tile.mini{height:23px}.closed{width:30px;height:36px}.portrait{width:24px;height:24px}.player b{font-size:10px}.table-label,.rack-label{font-size:8px}.rack-wrap{padding-top:7px}.staged{min-height:18px;margin-top:3px}.turn strong{font-size:13px}#hint,#error{min-height:10px;font-size:9px}#primary{min-height:32px}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}.rack-slot{border-radius:3px;min-width:0;animation:none}.rack-slot.vacant{background:0 0}.rack-slot.drop-target{outline-offset:-1px;background:#fff2bb66;outline:2px solid #f6df9f}.rack-slot.drag-source .tile{opacity:.3}.drag-ghost{z-index:9999;pointer-events:none;transform:rotate(-4deg);position:fixed!important;box-shadow:3px 8px 12px #41270d88!important}.rack-slot .tile{height:min(100% - 3px,44px)}.staged:empty{display:none}