*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font-family:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;background:#0d2f22;color:#e8efe9}
button{font:inherit;padding:8px 14px;border:0;border-radius:8px;background:#2f9e63;color:#fff;cursor:pointer}
button:hover{filter:brightness(1.12)}
button.linkbtn{background:none;color:#7fd0a5;text-decoration:underline;padding:0}
input{font:inherit;padding:8px 10px;border-radius:8px;border:1px solid #3a5f4c;background:#123527;color:#e8efe9}
#connbanner{display:none;background:#8a4b08;padding:6px;text-align:center}
#connbanner.on{display:block}
.center{max-width:560px;margin:6vh auto;padding:0 16px;text-align:center}
h1{font-size:2.2rem;margin:.2em 0}
.sub{color:#a8c7b4}
.hint{color:#87a595;font-size:.9rem}
.err{color:#ff9c8a;min-height:1.2em}
#login{display:flex;flex-direction:column;gap:10px;max-width:320px;margin:0 auto}
.cardbox{background:#123527;border:1px solid #2c5540;border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:12px;align-items:center;margin:14px 0}
.joinrow{display:flex;gap:8px}
.joinrow input{width:120px;text-transform:uppercase;letter-spacing:.2em}
#rooms{display:flex;flex-direction:column;gap:6px;max-width:440px;margin:0 auto}
.roomrow{display:flex;justify-content:space-between;align-items:center;gap:10px;background:#123527;border:1px solid #2c5540;border-radius:10px;padding:8px 12px}
.topbar{display:flex;align-items:center;gap:14px;padding:8px 14px;background:#0a241a;border-bottom:1px solid #2c5540;flex-wrap:wrap}
.topbar .code b{color:#ffd54f}
.topbar #gameinfo{color:#ffd54f;font-size:.95rem}
.topbar #oledbtn{margin-left:auto}
.layout{display:grid;grid-template-columns:1fr 280px;gap:12px;padding:12px;max-width:1200px;margin:0 auto}
@media(max-width:860px){.layout{grid-template-columns:1fr}}
.table{position:relative;height:min(56vh,460px);border-radius:18px;border:1px solid #2c5540;
  background:radial-gradient(ellipse at 50% 40%,#2f7d4f,#1b5233 70%,#143f28);box-shadow:inset 0 0 60px #00000055}
.seat{position:absolute;display:flex;flex-direction:column;align-items:center;gap:4px}
.seat.left{left:14px;top:50%;transform:translateY(-50%)}
.seat.right{right:14px;top:50%;transform:translateY(-50%)}
.seat.top{top:12px;left:50%;transform:translateX(-50%)}
.pname{background:#0a241acc;padding:2px 10px;border-radius:999px;font-size:.85rem;white-space:nowrap}
.seat.turn .pname{background:#ffd54f;color:#423204;font-weight:700}
.chip{background:#123527;border:1px solid #3a5f4c;border-radius:999px;padding:0 6px;font-size:.7rem;margin-left:4px}
.chip.decl{background:#ffd54f;color:#423204;border-color:#ffd54f}
.minihand{display:flex}
.card{position:relative;width:62px;height:90px;background:#fdfbf5;border-radius:8px;box-shadow:0 2px 6px #0007;flex:none;overflow:hidden}
.card img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none;user-select:none}
.card.back{background:repeating-linear-gradient(45deg,#1c5c40,#1c5c40 6px,#174a33 6px,#174a33 12px);border:2px solid #fdfbf5}
.card.back img{object-fit:cover}
.card.back.mini{width:20px;height:30px;margin-left:-8px;border-radius:4px;border-width:1px}
.card.playable{cursor:pointer;box-shadow:0 0 0 2px #ffd54f,0 2px 6px #0007;transition:transform .12s}
.card.playable:hover{transform:translateY(-12px);z-index:5}
.trick{position:absolute;left:50%;top:50%;width:210px;height:180px;transform:translate(-50%,-50%)}
.ts{position:absolute}
.ts.b{bottom:0;left:50%;transform:translateX(-50%)}
.ts.l{left:0;top:50%;transform:translateY(-50%)}
.ts.t{top:0;left:50%;transform:translateX(-50%)}
.ts.r{right:0;top:50%;transform:translateY(-50%)}
.trickmsg{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);background:#0a241acc;padding:4px 12px;border-radius:999px;font-size:.85rem;white-space:nowrap}
.overlay{position:absolute;inset:0;background:#000a;display:flex;align-items:center;justify-content:center;border-radius:18px}
.panel{background:#123527;border:1px solid #2c5540;border-radius:14px;padding:18px 22px;min-width:300px;max-height:95%;overflow:auto;text-align:center}
.panel h3{margin:.2em 0 .6em}
.srow{display:flex;justify-content:space-between;gap:26px;font-size:.95rem;padding:2px 0}
.srow .pos{color:#7fd0a5}.srow .neg{color:#ff9c8a}
.panel hr{border:0;border-top:1px solid #2c5540;margin:8px 0}
#actions{min-height:54px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center;padding:8px 0;font-size:.95rem}
.tout{display:flex;align-items:center;gap:4px;color:#a8c7b4;font-size:.9rem}
.bidlist{width:100%;text-align:center;color:#a8c7b4;font-size:.85rem}
.bid{margin:0 8px}
.selfline{text-align:center;color:#a8c7b4;font-size:.85rem;margin-bottom:2px}
.hand{display:flex;justify-content:center;min-height:104px;padding:6px 0 14px}
.hand .card{margin-left:-30px}
.hand .card:first-child{margin-left:0}
.side{display:flex;flex-direction:column;gap:12px}
.box{background:#123527;border:1px solid #2c5540;border-radius:14px;padding:12px 14px}
.box h4{margin:0 0 8px;color:#a8c7b4}
.lasttrick{display:flex;justify-content:center;gap:5px;padding-top:2px}
.lasttrick .card{width:44px;height:64px}
.lasttrick .card.playable{cursor:default;transform:none;box-shadow:0 0 0 2px #ffd54f,0 2px 6px #0007}
.lasttrick .card.playable:hover{transform:none}
.chatlog{height:220px;overflow-y:auto;font-size:.85rem;display:flex;flex-direction:column;gap:3px}
.chatmsg b{color:#7fd0a5}
#chatin{width:100%;margin-top:8px}
#toast{position:fixed;top:14px;left:50%;transform:translateX(-50%) translateY(-90px);background:#c0392b;color:#fff;padding:10px 18px;border-radius:10px;transition:transform .25s;z-index:99}
#toast.show{transform:translateX(-50%) translateY(0)}

html.oled body{background:#000}
html.oled .topbar{background:#000;border-bottom-color:#1f1f1f}
html.oled .cardbox,html.oled .roomrow,html.oled .box,html.oled .panel,html.oled .chip{background:#0a0a0a;border-color:#262626}
html.oled input{background:#0a0a0a;border-color:#333}
html.oled .table{background:radial-gradient(ellipse at 50% 40%,#0d2416,#06120b 70%,#000);border-color:#1e3a2a}
html.oled .pname,html.oled .trickmsg{background:#000000d9}
html.oled .card.back{background:repeating-linear-gradient(45deg,#151515,#151515 6px,#0d0d0d 6px,#0d0d0d 12px)}
html.oled .hint{color:#7f9a8b}