:root{
  --wood-deep:#5A3327;
  --wood-mid:#7A4A35;
  --wood-light:#9C6B47;
  --cream:#F6EFE3;
  --cream-dim:#E8DCC6;
  --ink:#2B2438;
  --night:#241F30;
  --night-2:#332B45;
  --gold:#D9A24B;
  --gold-bright:#F0C674;
  --jade:#5C7A5E;
  --jade-bright:#7FA37F;
  --ember:#B5482F;
  --ember-bright:#D8633F;
  --paper:#FBF6EC;
  --shadow:0 6px 18px rgba(20,14,8,0.45);
  --radius:14px;
  font-size:16px;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:'Literata',serif;
  background:
    radial-gradient(ellipse at 50% -10%, rgba(217,162,75,0.18), transparent 55%),
    linear-gradient(180deg, var(--night) 0%, var(--night-2) 55%, #1c1726 100%);
  color:var(--cream);
  min-height:100vh;
  overflow-x:hidden;
}
h1,h2,h3,.display{font-family:'Baloo 2',cursive,sans-serif;}
button{font-family:'Baloo 2',cursive,sans-serif;cursor:pointer;border:none;}
#app{max-width:1180px;width:100%;margin:0 auto;min-height:100vh;display:flex;flex-direction:column;position:relative;}
.narrow-col{max-width:520px;margin:0 auto;width:100%;}
.game-layout{display:flex;gap:18px;width:100%;flex:1;justify-content:center;align-items:flex-start;}
.game-layout .main-col{width:100%;max-width:560px;flex:1 1 auto;display:flex;flex-direction:column;}
.game-layout .side-col{display:none;}
.side-log-card{background:rgba(0,0,0,0.22);border:1px solid rgba(217,162,75,.25);border-radius:16px;
  padding:14px;max-height:calc(100vh - 40px);overflow-y:auto;position:sticky;top:20px;}
.side-log-card h3{color:var(--gold-bright);margin:0 0 10px;font-size:1.05rem;}
.log-toggle-btn{display:inline-flex;}
@media (min-width:880px){
  .game-layout .side-col{display:block;width:300px;flex-shrink:0;}
  .icon-btn.log-toggle-btn{display:none;}
}
@media (min-width:1040px){
  .game-layout .main-col{max-width:640px;}
  .game-layout .side-col{width:340px;}
}

/* ---------- lantern string ---------- */
.lanterns{display:flex;justify-content:space-around;padding:10px 18px 0;pointer-events:none;user-select:none;}
.lantern{width:20px;height:26px;border-radius:8px 8px 10px 10px;
  background:radial-gradient(circle at 50% 35%, var(--gold-bright), var(--gold) 60%, var(--ember) 130%);
  box-shadow:0 0 14px 4px rgba(240,198,116,0.55);
  animation:sway 3.4s ease-in-out infinite;
  transform-origin:top center;
}
.lantern:nth-child(odd){animation-delay:-1.2s;}
.lantern:nth-child(3n){animation-delay:-2s;}
@keyframes sway{0%,100%{transform:rotate(-4deg);}50%{transform:rotate(4deg);}}

/* ---------- generic layout ---------- */
.screen{flex:1;display:flex;flex-direction:column;padding:14px 16px 22px;}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);}}
.card{background:linear-gradient(180deg, rgba(251,246,236,0.06), rgba(251,246,236,0.02));
  border:1px solid rgba(217,162,75,0.25); border-radius:var(--radius); padding:16px; margin-bottom:14px;}
.title-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;}
h1.brand{font-size:1.6rem;line-height:1.25;margin:6px 0 2px;color:var(--gold-bright);text-shadow:0 2px 10px rgba(0,0,0,0.4);letter-spacing:.3px;}
.subtitle{color:var(--cream-dim);opacity:.85;font-size:.92rem;margin:0 0 18px;}
label{font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;color:var(--gold);display:block;margin-bottom:6px;}
input[type=text]{
  width:100%;padding:12px 14px;border-radius:10px;border:1px solid rgba(217,162,75,0.4);
  background:rgba(0,0,0,0.18);color:var(--cream);font-family:'Literata',serif;font-size:1rem;
}
input[type=text]:focus{outline:2px solid var(--gold);}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:12px 18px;border-radius:12px;font-weight:700;font-size:1rem;letter-spacing:.02em;
  background:linear-gradient(180deg, var(--gold-bright), var(--gold));color:#3a2510;
  box-shadow:0 4px 0 #8a661f, 0 6px 14px rgba(0,0,0,0.35);
  transition:transform .08s ease;
}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 #8a661f;}
.btn.secondary{background:linear-gradient(180deg, rgba(251,246,236,0.16), rgba(251,246,236,0.06));
  color:var(--cream);box-shadow:0 4px 0 rgba(0,0,0,0.3), 0 6px 14px rgba(0,0,0,0.3);}
.btn.ember{background:linear-gradient(180deg, var(--ember-bright), var(--ember));color:#2a0e06;
  box-shadow:0 4px 0 #6e2415,0 6px 14px rgba(0,0,0,0.35);}
.btn.jade{background:linear-gradient(180deg, var(--jade-bright), var(--jade));color:#10220f;
  box-shadow:0 4px 0 #2c3f2c,0 6px 14px rgba(0,0,0,0.35);}
.btn:disabled{opacity:.4;filter:grayscale(.4);box-shadow:none;transform:none;cursor:default;}
.btn-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px;}
.pill{padding:4px 10px;border-radius:999px;background:rgba(217,162,75,0.18);border:1px solid rgba(217,162,75,.4);
  font-size:.75rem;color:var(--gold-bright);font-weight:600;}
.muted{color:var(--cream-dim);opacity:.75;font-size:.85rem;}
.center{text-align:center;}
.row{display:flex;align-items:center;gap:8px;}
.spacer{flex:1;}
.icon-btn{background:rgba(251,246,236,0.08);border:1px solid rgba(217,162,75,.3);border-radius:10px;
  color:var(--cream);width:38px;height:38px;display:flex;align-items:center;justify-content:center;font-size:1.1rem;}

/* ---------- seats / lobby ---------- */
.seat-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:10px 0;}
.seat-card{border:1px solid rgba(217,162,75,.3);border-radius:12px;padding:10px;background:rgba(0,0,0,0.15);
  min-height:74px;display:flex;flex-direction:column;justify-content:center;gap:4px;position:relative;}
.seat-card.mine{border-color:var(--gold-bright);box-shadow:0 0 0 1px var(--gold-bright) inset;}
.seat-card.empty{opacity:.55;border-style:dashed;}
.seat-name{font-weight:700;font-family:'Baloo 2';font-size:.95rem;}
.seat-tag{font-size:.7rem;color:var(--gold);}
.seat-wind{position:absolute;top:8px;right:10px;font-size:1.3rem;opacity:.85;}

/* ---------- table ---------- */
.table-wrap{position:relative;flex:1;display:flex;flex-direction:column;}
.opponents-row{display:flex;justify-content:space-between;padding:4px 2px 8px;}
.opp{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:64px;}
.opp .avatar{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 35% 30%, var(--wood-light), var(--wood-deep));
  border:2px solid rgba(217,162,75,.5);font-family:'Baloo 2';font-weight:700;font-size:1.05rem;color:var(--gold-bright);}
.opp.turn .avatar{box-shadow:0 0 0 3px var(--gold-bright),0 0 16px 4px rgba(240,198,116,.6);}
.opp .nm{font-size:.72rem;color:var(--cream-dim);max-width:70px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.opp-balance{font-size:.68rem;font-weight:700;margin-bottom:1px;}
.opp .tilecount{display:flex;gap:2px;}
.opp .backtile{width:7px;height:11px;border-radius:2px;background:linear-gradient(180deg,var(--wood-light),var(--wood-deep));border:1px solid rgba(0,0,0,.4);}
.opp .meld-strip{display:flex;gap:2px;flex-wrap:wrap;justify-content:center;max-width:90px;}

.felt{
  flex:1;border-radius:20px;position:relative;margin:6px 0 10px;
  background:
    radial-gradient(ellipse at 50% 40%, rgba(240,198,116,0.16), transparent 60%),
    repeating-linear-gradient(45deg, rgba(0,0,0,0.06) 0 2px, transparent 2px 6px),
    linear-gradient(160deg, var(--wood-mid), var(--wood-deep) 70%);
  box-shadow:inset 0 0 40px rgba(0,0,0,.55), 0 8px 20px rgba(0,0,0,.4);
  padding:14px 10px;min-height:170px;display:flex;flex-direction:column;align-items:center;justify-content:center;
}
.wall-info{position:absolute;top:8px;left:12px;font-size:.72rem;color:var(--cream-dim);background:rgba(0,0,0,.3);
  padding:3px 8px;border-radius:999px;}
.dealer-info{position:absolute;top:8px;right:12px;font-size:.72rem;color:var(--gold-bright);background:rgba(0,0,0,.3);
  padding:3px 8px;border-radius:999px;}
@keyframes pulse{0%,100%{opacity:.9;}50%{opacity:.25;}}

/* ---------- tiles ---------- */
.tile{
  width:64px;height:88px;border-radius:10px;flex:0 0 auto;position:relative;
  background:linear-gradient(180deg, var(--paper), var(--cream-dim));
  border:1px solid rgba(70,45,20,.4);
  box-shadow:0 3px 0 rgba(70,45,20,.5), 0 4px 8px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.25);
  display:flex;align-items:center;justify-content:center;font-size:2.75rem;color:var(--ink);
  user-select:none; transition:transform .12s ease; touch-action:none;
}
@media (min-width:880px){
  .tile{width:74px;height:102px;font-size:3.2rem;border-radius:11px;}
}
.tile-num{position:absolute;top:3px;left:5px;font-family:'Baloo 2',cursive,sans-serif;
  font-size:.72rem;font-weight:800;line-height:1;opacity:.85;}
.tile.just-drawn{box-shadow:0 0 0 2px var(--jade-bright), 0 6px 14px rgba(0,0,0,.4);}
.tile.suit-C{color:#7a1f1f;}
.tile.suit-B{color:#1f5c33;}
.tile.suit-D{color:#1f3a6b;}
.tile.honor{color:#8a5a12;}
.tile.dragon-DR{color:#b5232f;}
.tile.dragon-DG{color:#1f6b3a;}
.tile.dragon-DW{color:#444;}
.tile.joker{color:#8a3a9c;background:linear-gradient(180deg,#fff7e8,#f3dfb0);}
.tile.back{
  background:linear-gradient(150deg, var(--wood-light), var(--wood-deep));
  border:1px solid rgba(0,0,0,.4);
}
.tile.big{width:80px;height:110px;font-size:3.6rem;}
@media (min-width:880px){ .tile.big{width:92px;height:128px;font-size:4.1rem;} }
.last-discard-zone{display:flex;flex-direction:column;align-items:center;gap:6px;margin-bottom:10px;}
.last-discard-label{font-family:'Baloo 2',cursive,sans-serif;font-size:.85rem;color:var(--gold-bright);
  background:rgba(0,0,0,.3);padding:3px 12px;border-radius:999px;}
.last-discard-tile{animation:popIn .25s ease;}
@keyframes popIn{from{opacity:0;transform:scale(.7);}to{opacity:1;transform:scale(1);}}
.discard-history{display:flex;align-items:center;gap:4px;flex-wrap:wrap;justify-content:center;
  padding-top:8px;border-top:1px dashed rgba(217,162,75,.25);width:100%;}
.dh-label{font-size:.68rem;color:var(--cream-dim);opacity:.7;margin-right:4px;}
.discard-history .tile{transform:scale(.5);margin:-10px -6px;}
.tile.selected{transform:translateY(-10px);box-shadow:0 0 0 2px var(--gold-bright), 0 8px 14px rgba(0,0,0,.4);}
.tile.passsel{transform:translateY(-10px);box-shadow:0 0 0 2px var(--ember-bright), 0 8px 14px rgba(0,0,0,.4);}
.tile.clickable{cursor:pointer;}
.tile.clickable:hover{transform:translateY(-4px);}
.meld-tiles{display:flex;gap:3px;}
.meld-tiles .tile{width:40px;height:56px;font-size:1.7rem;}
.meld-tiles .tile-num{font-size:.55rem;top:2px;left:3px;}

.hand-dock{background:rgba(0,0,0,0.22);border-top:1px solid rgba(217,162,75,.25);border-radius:16px 16px 0 0;
  padding:10px 8px 6px;}
.my-melds{display:flex;gap:8px;justify-content:center;margin-bottom:6px;min-height:0;flex-wrap:wrap;}
.hand-row{display:flex;gap:4px;overflow-x:auto;padding:4px 2px 8px;justify-content:center;flex-wrap:wrap;touch-action:none;}
.action-bar{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;padding:4px 4px 2px;min-height:48px;}
.turn-banner{text-align:center;font-size:.85rem;color:var(--gold-bright);margin-bottom:2px;min-height:18px;}

/* ---------- modal ---------- */
.modal-bg{position:fixed;inset:0;background:rgba(10,7,14,.72);display:flex;align-items:center;justify-content:center;
  z-index:50;padding:18px;backdrop-filter:blur(2px);}
.modal{position:relative;background:linear-gradient(180deg,#352b46,#241f30);border:1px solid rgba(217,162,75,.35);
  border-radius:16px;padding:20px;max-width:440px;width:100%;max-height:85vh;overflow-y:auto;box-shadow:var(--shadow);}
.modal h2{color:var(--gold-bright);margin-top:0;}
.close-x{position:absolute;top:10px;right:14px;background:none;color:var(--cream);font-size:1.4rem;}
.toast{position:fixed;bottom:14px;left:50%;transform:translateX(-50%);background:rgba(20,16,26,.95);
  border:1px solid var(--gold);color:var(--cream);padding:10px 16px;border-radius:10px;font-size:.85rem;
  z-index:80;box-shadow:var(--shadow);max-width:90%;text-align:center;}
.score-table{width:100%;border-collapse:collapse;margin-top:8px;}
.score-table th,.score-table td{padding:6px 8px;text-align:left;border-bottom:1px solid rgba(217,162,75,.2);font-size:.9rem;}
.score-table th{color:var(--gold);font-weight:600;}
.bonus-tag{display:inline-block;background:rgba(127,163,127,.18);border:1px solid rgba(127,163,127,.5);
  color:var(--jade-bright);font-size:.7rem;padding:1px 6px;border-radius:6px;margin-right:4px;margin-top:3px;}
.howto-body h3{color:var(--gold-bright);margin-top:18px;margin-bottom:4px;}
.howto-body p, .howto-body li{font-size:.88rem;color:var(--cream-dim);line-height:1.5;}
.linkish{color:var(--gold-bright);text-decoration:underline;cursor:pointer;background:none;font-size:.85rem;}
.shuffle-tiles{position:relative;height:64px;width:120px;margin:0 auto 22px;}
.shuffle-tiles .tile{position:absolute;top:6px;left:45px;}
.shuffle-a{animation:shuffleA 1.05s ease-in-out infinite;}
.shuffle-b{animation:shuffleB 1.05s ease-in-out infinite;animation-delay:.12s;}
.shuffle-c{animation:shuffleC 1.05s ease-in-out infinite;animation-delay:.24s;}
@keyframes shuffleA{0%,100%{transform:translateX(-34px) rotate(-10deg);}50%{transform:translateX(-12px) rotate(5deg);}}
@keyframes shuffleB{0%,100%{transform:translateX(0) translateY(-6px) rotate(7deg);}50%{transform:translateX(6px) translateY(0) rotate(-7deg);}}
@keyframes shuffleC{0%,100%{transform:translateX(34px) rotate(10deg);}50%{transform:translateX(12px) rotate(-5deg);}}
.shuffle-quip{font-family:'Baloo 2',cursive,sans-serif;font-size:1.35rem;color:var(--gold-bright);text-align:center;
  padding:0 24px;margin:0 0 6px;text-shadow:0 2px 8px rgba(0,0,0,0.4);}
.tile-info-bar{background:rgba(0,0,0,0.32);border:1px solid rgba(217,162,75,.3);border-radius:10px;
  padding:6px 14px;margin:0 0 8px;text-align:center;height:58px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;overflow:hidden;}
.tile-info-bar .ti-name{font-family:'Baloo 2',cursive,sans-serif;font-weight:700;color:var(--gold-bright);font-size:.95rem;line-height:1.2;}
.tile-info-bar .ti-blurb{color:var(--cream-dim);font-size:.72rem;opacity:.85;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.money-pos{color:var(--jade-bright);font-weight:700;}
.money-neg{color:var(--ember-bright);font-weight:700;}
.money-zero{color:var(--cream-dim);}
.chip-toast-stack{display:flex;flex-direction:column;gap:6px;margin:6px 0;}
.chip-toast{background:linear-gradient(180deg, rgba(217,162,75,0.22), rgba(217,162,75,0.08));
  border:1px solid rgba(217,162,75,.5);border-radius:10px;padding:7px 12px;font-size:.78rem;
  color:var(--cream);text-align:center;animation:toastIn .3s ease;box-shadow:0 4px 10px rgba(0,0,0,.3);}
@keyframes toastIn{from{opacity:0;transform:translateY(-8px) scale(.96);}to{opacity:1;transform:translateY(0) scale(1);}}
.log-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px;}
.log-list li{font-size:.85rem;color:var(--cream-dim);padding:6px 10px;background:rgba(0,0,0,0.18);
  border-radius:8px;border-left:2px solid rgba(217,162,75,.4);}
.tile.dragging{box-shadow:0 14px 24px rgba(0,0,0,.55), 0 0 0 2px var(--gold-bright);cursor:grabbing;}
.hand-row-wrap{display:flex;align-items:flex-start;gap:6px;}
.hand-row-wrap .hand-row{flex:1;}
@media (max-width:380px){
  .tile{width:50px;height:70px;font-size:2.1rem;}
}
.flower-row{display:flex;gap:2px;flex-wrap:wrap;justify-content:center;min-height:14px;margin-top:2px;}
.flower-chip{font-size:.65rem;background:rgba(217,162,75,.18);border:1px solid rgba(217,162,75,.4);
  border-radius:6px;padding:0 3px;color:var(--gold-bright);}
.joker-badge{display:inline-flex;align-items:center;gap:4px;background:rgba(127,90,163,.22);
  border:1px solid rgba(168,120,209,.5);border-radius:999px;padding:3px 10px;font-size:.75rem;
  color:#caa3e8;font-weight:700;}
.tile.flowercat{color:#b5598a;}
.my-flowers{display:flex;gap:3px;flex-wrap:wrap;justify-content:center;margin:4px 0;min-height:0;}