:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,sans-serif;color:#f8f2df;background:#0c1c20;font-synthesis:none}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;background:radial-gradient(circle at 50% 15%,#294c47,#0c1c20 72%)}
button,input,select{font:inherit}
button{cursor:pointer;border:1px solid transparent;border-radius:10px;padding:11px 16px;font-weight:700;transition:transform .15s,background .15s}
button:hover:not(:disabled){transform:translateY(-2px)}
button:disabled{opacity:.45;cursor:default}
.quiet{background:#ffffff13;color:#f6e8cb;border-color:#ffffff2c}
.primary{background:linear-gradient(135deg,#f2d494,#c79d57);color:#20302b;box-shadow:0 7px 0 #9e7843,0 16px 30px #0005}
header{height:70px;padding:10px max(18px,calc((100vw - 1200px)/2));display:flex;justify-content:space-between;align-items:center;background:#0d2023d9;border-bottom:1px solid #e4bd7350}
.brand{display:flex;align-items:center;gap:12px}
.brand strong{display:block;font-size:22px;letter-spacing:.08em}
.brand small{display:block;color:#adc7bd;font-size:10px;letter-spacing:.16em;text-transform:uppercase}
.mark{display:grid;place-items:center;width:45px;height:45px;background:linear-gradient(145deg,#ffe5ae,#b98642);color:#1c3f3d;border:2px solid #ffedae;border-radius:8px;box-shadow:3px 4px 0 #76532d;font-size:25px}
main{max-width:1200px;margin:auto;padding:20px}
.panel{display:grid;grid-template-columns:1.25fr .75fr;gap:20px}
.hero{position:relative;overflow:hidden;padding:60px 34px;min-height:520px;border:1px solid #e8c68455;border-radius:20px;background:radial-gradient(circle at 72% 84%,#4d866d80,transparent 45%),linear-gradient(140deg,#244f46,#132c30);box-shadow:0 25px 70px #0004}
.eyebrow{color:#f0ce85;font-size:12px;letter-spacing:.21em;font-weight:800}
.hero h1{font-size:clamp(36px,5vw,66px);line-height:1.04;margin:35px 0 20px;position:relative;z-index:1}
.hero>p:not(.eyebrow){max-width:450px;line-height:1.55;color:#c6d9cc;position:relative;z-index:1}
.hero-tiles{position:absolute;right:7%;bottom:13%;display:flex;gap:7px;transform:perspective(700px) rotateX(27deg) rotateZ(-13deg);filter:drop-shadow(15px 28px 13px #001d1b99)}
.hero-tiles i{display:grid;place-items:center;width:64px;height:90px;border:3px solid #e5dcc0;border-bottom:12px solid #1c5557;border-radius:7px;background:linear-gradient(145deg,#fffdf2,#e4dcc8);color:#a82e31;font:normal 40px Georgia,serif;box-shadow:5px 5px 0 #78908a}
.hero-tiles i:nth-child(2){color:#195b8e;transform:translateY(-7px)}
.hero-tiles i:nth-child(3){color:#214d3f;transform:translateY(-15px)}
.hero-tiles i:nth-child(4){color:#ae2c30;transform:translateY(-23px)}
.form{padding:25px;border:1px solid #c6ad7950;background:#142c2c;border-radius:20px;display:flex;flex-direction:column;gap:13px;box-shadow:0 25px 60px #0003}
.form h2{margin:0 0 5px;color:#f3dda6;font-size:22px}
.form label{display:flex;flex-direction:column;gap:6px;color:#c5d4c7;font-size:13px}
.form input,.form select,.join input{width:100%;background:#081b1d;color:#f8f2df;border:1px solid #4a6a5d;border-radius:9px;padding:12px;outline:none}
.form input:focus,.form select:focus{border-color:#e9c782}
.join{display:flex;gap:8px}
.join button{background:#42695b;color:white}
.join input{min-width:0}
#games{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:10px}
#games h2{width:100%;font-size:17px;margin:4px 0;color:#e9d19c}
#games button{background:#d6e2d022;color:#fff;border-color:#ffffff30}
#error{color:#ffc0aa;min-height:1.2em;margin:0}
.game-top{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px}
.game-top>div{display:flex;align-items:center;gap:8px}
.game-top span{color:#ead29d}
.table-shell{position:relative;height:min(78vw,760px);min-height:540px;background:#0c2022;border:1px solid #d5a96244;border-radius:18px;overflow:hidden;box-shadow:0 25px 55px #0009}
.table3d,.table-canvas{width:100%;height:100%;display:block}
.table3d{position:absolute;inset:0;color:#f5e5c1;display:grid;place-items:center}
.seat{position:absolute;z-index:2;pointer-events:none;text-align:center}
.north{top:3%;left:50%;transform:translateX(-50%)}
.south{bottom:3%;left:50%;transform:translateX(-50%)}
.west{left:1.5%;top:50%;transform:translateY(-50%)}
.east{right:1.5%;top:50%;transform:translateY(-50%)}
.label{display:inline-block;max-width:230px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:#092c2bd9;border:1px solid #d9bc7d66;border-radius:7px;padding:6px 10px;color:#f5e3bb;font-size:12px;box-shadow:0 3px 10px #001d19bb}
.label.active{background:#a17c3a;color:#fff;border-color:#ffe6a1;box-shadow:0 0 20px #e6c16a80}
.center{position:absolute;top:50%;left:50%;z-index:2;transform:translate(-50%,-50%);display:flex;flex-direction:column;gap:3px;text-align:center;pointer-events:none;text-shadow:0 2px 5px #001}
.center span{font-size:11px;letter-spacing:.2em;color:#f1d486}
.center strong{font-size:12px;max-width:150px}
.center small{font-size:10px;color:#c1d2c7}
.game-controls{min-height:90px;padding:12px 5px 25px;text-align:center}
.actions{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;min-height:43px}
.actions button{background:linear-gradient(#f0d995,#c49d5d);color:#193631;box-shadow:0 4px 0 #896c3d}
.actions button.pass{background:#596c6a;color:white;box-shadow:0 4px 0 #344543}
#hint{color:#e4dec6;margin:8px 0;font-size:13px}
.note{color:#9fb5ab;font-size:11px}
[hidden]{display:none!important}
body[data-theme=retro]{font-family:Georgia,serif;background:repeating-linear-gradient(0deg,#1c1a21,#1c1a21 3px,#151419 4px);color:#e9d0aa}
body[data-theme=retro] header{background:#2b252f;border-bottom:3px ridge #947481}
body[data-theme=retro] .hero{border-radius:2px;background:linear-gradient(135deg,#564251,#24252d)}
body[data-theme=retro] .form{border-radius:2px;background:#302b35}
body[data-theme=retro] .table-shell{border-radius:2px;border:5px ridge #9a7981}
body[data-theme=retro] .label{border-radius:1px;background:#29242eda}
body[data-theme=retro] .label.active{background:#965e78}
body[data-theme=retro] button{border-radius:2px}
body[data-theme=retro] .primary,body[data-theme=retro] .actions button{background:#a7838f;color:#fff}
@media(max-width:700px){
  main{padding:10px}.panel{display:block}.hero{min-height:240px;padding:24px;margin-bottom:12px}.hero h1{margin:16px 0;font-size:38px}.hero>p:not(.eyebrow){max-width:65%;font-size:13px}.hero-tiles{right:1%;bottom:12%;transform:scale(.65) perspective(700px) rotateX(27deg) rotateZ(-13deg);transform-origin:bottom right}
  .form{padding:18px}.table-shell{height:calc(100dvh - 185px);min-height:480px;max-height:760px}
  .game-top{font-size:12px;flex-wrap:wrap}.game-top button{padding:8px}.west,.east{top:40%}.label{font-size:10px;max-width:110px;padding:4px 6px}.north{top:2%}.south{bottom:2%}.center strong{max-width:80px;font-size:10px}.center span,.center small{font-size:9px}
}
.table-shell{height:calc(100dvh - 164px);min-height:620px;max-height:950px;border-radius:5px}
.table3d{background:#102c2d}
.seat{display:flex;flex-direction:column;align-items:center;gap:4px}
.north{top:3%;left:auto;right:8%;transform:none}
.west{left:1.5%;top:26%;transform:none}
.east{right:1.5%;top:26%;transform:none}
.south{bottom:18%;left:4%;transform:none}
.avatar{width:68px;height:68px;border:3px solid #7bc7de;border-radius:10px;background:linear-gradient(135deg,#2b7274,#122e42);box-shadow:0 0 0 2px #e4d3a0,0 8px 18px #0009;display:grid;place-items:center;overflow:hidden;color:#ebdda6;font-size:31px;font-weight:800}
.avatar img{width:100%;height:100%;object-fit:cover;grid-area:1/1}
.bot-avatar{background:linear-gradient(135deg,#45576b,#1a2e39);color:#bddde1}
.seat .label{background:#08242ee0;border:0;min-width:110px;border-radius:2px}
.seat .label.active{background:#075e65;box-shadow:0 0 15px #55d4bc}
.center{width:140px;height:120px;gap:5px;background:#162838db;border:5px ridge #5d6b77;box-shadow:0 12px 0 #091e28,0 15px 25px #0008;transform:translate(-50%,-50%) rotate(0)}
.center span{font-size:14px;color:#e6d891}
.center strong{font-size:15px;color:#4fe8df;text-shadow:0 0 7px #37d5d9}
.center small{font-size:13px;color:#e6d891}
.hand{position:absolute;z-index:5;left:0;right:0;bottom:8px;display:flex;justify-content:center;align-items:end;gap:2px;padding:5px 10px 10px;overflow-x:auto;overflow-y:visible;scrollbar-width:thin}
.hand-tile{flex:0 0 clamp(26px,calc((100vw - 80px)/14),82px);width:clamp(26px,calc((100vw - 80px)/14),82px);height:clamp(42px,calc((100vw - 80px)/10.1),118px);padding:0;border:2px solid #f7f4e9;border-radius:6px 6px 4px 4px;background-image:var(--face);background-size:100% 100%;background-color:#eee7d7;box-shadow:0 8px 0 #80acc1,3px 10px 0 #326879,0 13px 8px #0009;transform:perspective(600px) rotateX(2deg);transition:transform .16s,filter .16s}
.hand-tile:hover:not(:disabled),.hand-tile:focus-visible{transform:translateY(-15px) perspective(600px) rotateX(2deg);filter:brightness(1.1);outline:2px solid #f6d373}
.hand-tile:disabled{opacity:1;filter:brightness(.8)}
.game-controls{min-height:70px;padding:6px 0 12px}
@media(min-width:1300px){main{max-width:none}.table-shell{height:calc(100dvh - 175px)}.hand-tile{flex-basis:clamp(70px,6.5vw,110px);width:clamp(70px,6.5vw,110px);height:clamp(100px,9.4vw,156px)}.avatar{width:84px;height:84px}}
@media(max-width:700px){.table-shell{height:calc(100dvh - 190px);min-height:480px}.avatar{width:44px;height:44px;border-width:2px}.north{right:4%;top:3%}.west{left:1%;top:23%}.east{right:1%;top:23%}.south{left:2%;bottom:19%}.seat .label{max-width:95px;min-width:0;font-size:9px}.center{width:94px;height:85px}.center span{font-size:11px}.center strong{font-size:10px}.center small{font-size:9px}.hand{justify-content:flex-start}.hand-tile{flex:0 0 43px;width:43px;height:61px}}