*{box-sizing:border-box}html,body{margin:0;height:100%;font-family:Arial,Helvetica,sans-serif;background:#10291f;color:#fff}
#app{height:100%;display:flex;flex-direction:column}
header{height:58px;display:flex;align-items:center;gap:24px;padding:0 18px;background:#17241f;border-bottom:1px solid #51655c;z-index:5}
.brand{font-weight:800;letter-spacing:1.5px}.brand,#score{white-space:nowrap}#score{margin-left:auto;font-size:16px}
button{background:#e9e2c8;color:#171717;border:0;border-radius:8px;padding:9px 14px;font-weight:700;cursor:pointer}
#table{position:relative;flex:1;overflow:hidden;background:radial-gradient(circle at 50% 55%,#14715d 0,#075441 48%,#063c31 100%);min-height:600px}
.player{position:absolute;display:flex;align-items:center;gap:8px;font-weight:700;text-shadow:0 1px 2px #000}
.player.top{top:18px;left:50%;transform:translateX(-50%);flex-direction:column}
.player.left{left:18px;top:42%;flex-direction:column}.player.right{right:18px;top:42%;flex-direction:column}
.mood{display:inline-block;min-width:24px;font-size:24px;text-align:center}.backs{display:flex;gap:3px}.backs.vertical{flex-direction:column}
.back{width:16px;height:31px;border:2px solid #262626;border-radius:4px;background:linear-gradient(135deg,#f7f1da,#cfc7ad);box-shadow:inset 0 0 0 2px #fff9e6,1px 2px 2px #001c15}
.vertical .back{width:31px;height:16px}
#boardWrap{position:absolute;left:9%;right:9%;top:42%;height:150px;display:flex;align-items:center;justify-content:center;gap:8px}
#chain{display:flex;align-items:center;justify-content:center;min-width:60px;max-width:82%;flex-wrap:nowrap}
.target{width:80px;height:110px;border-radius:14px;transition:.15s}.target.active{border:3px dashed rgba(255,255,255,.75);background:rgba(255,255,255,.08);cursor:pointer}
.tile{position:relative;width:48px;height:94px;background:linear-gradient(145deg,#fffdf3 0,#eee8d2 70%,#d2cbb4 100%);border:3px solid #252525;border-radius:8px;box-shadow:inset 0 0 0 2px #fff,inset 0 0 0 4px #c8c0a7,2px 4px 5px rgba(0,0,0,.45);display:flex;flex-direction:column;flex:0 0 auto;user-select:none}
.tile.horizontal{width:94px;height:48px;flex-direction:row}.tile.horizontal .half{width:50%;height:100%}.tile.horizontal .half:first-child{border-right:2px solid #222;border-bottom:0}
.half{position:relative;width:100%;height:50%}.half:first-child{border-bottom:2px solid #222}
.pip{position:absolute;width:8px;height:8px;border-radius:50%;background:#171717;transform:translate(-50%,-50%);box-shadow:inset 1px 1px 1px rgba(255,255,255,.25)}
#human{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px}
.human-name{font-weight:800;display:flex;align-items:center;gap:6px}
#hand{display:flex;gap:8px;min-height:106px;align-items:flex-end}
#hand .tile{cursor:pointer;transition:transform .12s,filter .12s}
#hand .tile:hover{filter:brightness(1.05)}#hand .tile.selected{transform:translateY(-14px);filter:drop-shadow(0 5px 4px rgba(255,255,255,.25))}
#hand .tile.invalid{animation:shake .18s linear 2}
@keyframes shake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
#message{position:absolute;top:30%;left:50%;transform:translateX(-50%);font-size:20px;font-weight:800;text-shadow:0 2px 4px #000;min-height:28px}
#panel{position:absolute;right:14px;bottom:14px;width:190px;max-height:180px;background:rgba(5,24,19,.62);border:1px solid rgba(255,255,255,.25);border-radius:10px;padding:10px;overflow:auto;font-size:13px}
.panel-title{font-weight:800;margin-bottom:6px}#roundLog div{padding:3px 0;border-top:1px solid rgba(255,255,255,.1)}
@media(max-width:850px){#panel{display:none}.tile{width:42px;height:82px}.tile.horizontal{width:82px;height:42px}#boardWrap{left:4%;right:4%}#hand{gap:4px}.brand{font-size:13px}header{gap:8px;padding:0 8px}button{padding:7px 9px}}
.auth{min-height:100vh;display:grid;place-items:center;background:#075f4c;color:#18221d}.card{width:min(420px,90vw);background:#f6f0df;padding:28px;border-radius:16px;box-shadow:0 16px 45px #0006}.card h1{letter-spacing:2px}.card form{display:grid;gap:14px}.card label{font-weight:700}.card input{display:block;width:100%;box-sizing:border-box;margin-top:6px;padding:12px;border:1px solid #aaa;border-radius:8px;font-size:16px}.card button,.lobby button,.button-link{background:#efe5c7;color:#172019;border:0;border-radius:9px;padding:10px 16px;font-weight:800;text-decoration:none;cursor:pointer}.notice{padding:10px;background:#fff3bd;border-radius:8px}.error{background:#ffd9d9}.small{font-size:13px}.lobby{min-height:calc(100vh - 64px);background:#075f4c;color:#fff;display:grid;grid-template-columns:1fr 340px;gap:20px;padding:24px}.lobby-main, .lobby aside>div{background:#0a4f40;border:1px solid #ffffff22;border-radius:14px;padding:18px}.seat-grid{height:430px;position:relative}.seat{position:absolute;background:#123f35;padding:12px;border-radius:12px;text-align:center;min-width:130px}.seat span{display:block;margin:7px}.seat0{bottom:0;left:50%;transform:translateX(-50%)}.seat2{top:0;left:50%;transform:translateX(-50%)}.seat1{left:0;top:50%;transform:translateY(-50%)}.seat3{right:0;top:50%;transform:translateY(-50%)}.lobby aside{display:grid;gap:18px;align-content:start}.dot{display:inline-block;width:9px;height:9px;background:#56e37c;border-radius:50%;margin-right:7px}.online>div>div{padding:5px}.chat #chatList{height:260px;overflow:auto;background:#062f27;padding:9px;border-radius:8px}.chat #chatForm{display:flex;margin-top:8px}.chat input{flex:1;min-width:0;padding:10px;border-radius:8px 0 0 8px;border:0}.chat button{border-radius:0 8px 8px 0}.big{display:inline-block;font-size:20px;margin-top:16px}@media(max-width:800px){.lobby{grid-template-columns:1fr}.lobby aside{grid-row:2}}