:root {
  --bg:#fdf6ee; --bg2:#f7ede0; --bg3:#e8ddd0;
  --rose:#c0586a; --rose-lt:#e8849a; --rose-pale:#f9e8ec;
  --gold:#b8843a; --gold-lt:#d4a55a; --gold-pale:#fdf0dc;
  --teal:#3a8a80; --teal-lt:#5ab0a4; --teal-pale:#e0f5f2;
  --navy:#2c3e5a; --navy-lt:#4a6080;
  --text:#2c2018; --text2:#6b5040; --text3:#a08060;
  --ivory:#fdfaf5; --ivory2:#f5efe4; --ivory3:#ddd5c0;
  --shadow-tile:0 3px 8px rgba(44,32,24,0.20),0 1px 2px rgba(44,32,24,0.14);
  --shadow-card:0 4px 20px rgba(44,32,24,0.10);
  --r:14px; --rt:8px;
}

*{box-sizing:border-box;margin:0;padding:0;}

body{
  background:var(--bg);color:var(--text);font-family:'Nunito',sans-serif;
  min-height:100vh;overflow:hidden;
  background-image:
    radial-gradient(ellipse at 10% 20%,rgba(192,88,106,0.06) 0%,transparent 50%),
    radial-gradient(ellipse at 90% 80%,rgba(58,138,128,0.06) 0%,transparent 50%);
}

/* LOBBY */
#lobbyScreen{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  font-family:'Nunito',sans-serif;
}
.lobby-box{
  background:white;border-radius:20px;padding:40px;max-width:420px;width:92%;
  text-align:center;box-shadow:0 20px 60px rgba(44,32,24,0.12);border:2px solid var(--bg3);
}
.lobby-box h1{
  font-family:'Cormorant Garamond',serif;font-size:48px;font-weight:700;color:var(--rose);
  margin-bottom:4px;
}
.lobby-box h1 span{
  font-size:16px;font-weight:600;letter-spacing:3px;color:var(--text3);
  text-transform:uppercase;display:block;margin-top:-8px;font-family:'Nunito',sans-serif;
}
.lobby-box p{color:var(--text3);font-size:14px;margin-bottom:24px;}
.lobby-box input{
  width:100%;padding:12px 16px;border:2px solid var(--bg3);border-radius:12px;
  font-family:'Nunito',sans-serif;font-size:15px;color:var(--text);
  margin-bottom:12px;outline:none;transition:border-color .2s;
}
.lobby-box input:focus{border-color:var(--rose-lt);}
.lobby-buttons{display:flex;flex-direction:column;gap:10px;margin-bottom:16px;}
.lobby-buttons button{
  width:100%;padding:13px;border-radius:12px;font-family:'Nunito',sans-serif;
  font-size:15px;font-weight:700;cursor:pointer;border:none;
  background:var(--rose);color:white;transition:all .2s;
}
.lobby-buttons button:hover{background:var(--rose-lt);transform:translateY(-1px);}
.join-row{display:flex;gap:8px;}
.join-row input{margin-bottom:0;flex:1;}
.join-row button{width:auto;padding:13px 20px;background:var(--teal);}
.join-row button:hover{background:var(--teal-lt);}
.lobby-status{font-size:13px;color:var(--rose);font-weight:600;min-height:20px;}
.room-code-display{
  display:flex;flex-direction:column;align-items:center;gap:4px;
  margin:16px 0 8px;
}
.room-code-display .room-label{
  font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;
  color:var(--text3);font-family:'Nunito',sans-serif;
}
.room-code-display #displayCode{
  font-family:'Space Mono','Courier New',monospace;
  font-size:32px;font-weight:700;color:var(--rose);
  letter-spacing:10px;padding-left:10px;
  background:rgba(0,0,0,0.08);border-radius:8px;padding:6px 16px 6px 22px;
}
#playerList{display:flex;flex-direction:column;gap:6px;margin-bottom:12px;}
.player-list-item{
  background:var(--bg2);border-radius:8px;padding:8px 12px;
  font-size:14px;font-weight:600;color:var(--text2);
  display:flex;align-items:center;gap:8px;
}
.player-list-item .wind{
  background:var(--rose);color:white;border-radius:4px;
  padding:2px 6px;font-family:'Noto Serif TC',serif;font-size:13px;
}
#startBtn{
  width:100%;padding:13px;border-radius:12px;font-family:'Nunito',sans-serif;
  font-size:15px;font-weight:700;cursor:pointer;border:none;
  background:var(--gold);color:white;margin-bottom:8px;transition:all .2s;
}
#startBtn:hover{background:var(--gold-lt);}
#waitingMsg{font-size:13px;color:var(--text3);}

/* LOBBY GAME MODE CARDS */
.lobby-mode-selector{margin:14px 0 12px;text-align:left;}
.lobby-mode-label{
  font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;
  color:var(--text3);margin-bottom:8px;text-align:center;
}
.lobby-mode-cards{display:flex;gap:10px;}
.lobby-mode-card{
  flex:1;cursor:pointer;
}
.lobby-mode-card input[type=radio]{display:none;}
.lobby-mode-card-inner{
  border:2px solid var(--bg3);border-radius:12px;padding:12px 10px;text-align:center;
  background:var(--bg2);transition:border-color .2s,background .2s,transform .15s;
}
.lobby-mode-card:hover .lobby-mode-card-inner{transform:translateY(-2px);border-color:var(--rose-lt);}
.lobby-mode-card input:checked + .lobby-mode-card-inner{
  border-color:var(--rose);background:var(--rose-pale);
}
.lobby-mode-icon{font-size:24px;margin-bottom:4px;}
.lobby-mode-name{font-size:13px;font-weight:700;color:var(--text);margin-bottom:3px;}
.lobby-mode-desc{font-size:10px;color:var(--text3);line-height:1.4;}

/* WAITING ROOM MODE BADGE */
.waiting-mode-badge{
  margin:8px 0;padding:7px 14px;border-radius:20px;
  font-size:12px;font-weight:700;text-align:center;
  background:var(--teal-pale);color:var(--teal);border:1.5px solid var(--teal-lt);
}

.passport-password-modal{
  max-width:420px;text-align:center;
}
.passport-password-input{
  width:100%;padding:12px 14px;
  border:2px solid var(--bg3);
  border-radius:8px;
  font-family:'Nunito',sans-serif;
  font-size:15px;color:var(--text);
  outline:none;
  margin:4px 0 8px;
}
.passport-password-input:focus{
  border-color:var(--rose-lt);
}
.passport-password-error{
  min-height:18px;
  color:var(--rose);
  font-size:12px;
  font-weight:700;
  margin-bottom:10px;
}
.passport-password-actions{
  margin-top:4px;
}

/* PASSPORT BADGE (in game header) */
.passport-pill{
  background:var(--teal-pale);color:var(--teal);border:1.5px solid var(--teal-lt);
  border-radius:20px;padding:4px 12px;font-size:12px;font-weight:700;
}

/* PASSPORT SELECTOR MODAL */
.passport-modal-box{
  max-width:600px;width:96%;max-height:88vh;overflow-y:auto;
}
.passport-categories{display:flex;flex-direction:column;gap:16px;margin-top:16px;}
.passport-category{
  background:var(--bg2);border-radius:12px;padding:14px 16px;
  border:1.5px solid var(--bg3);
}
.passport-cat-label{
  font-size:12px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--rose);margin-bottom:2px;
}
.passport-cat-desc{font-size:11px;color:var(--text3);margin-bottom:10px;}
.passport-options-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:6px;
}
@media(max-width:520px){.passport-options-grid{grid-template-columns:1fr;}}
.passport-opt{
  display:flex;align-items:center;gap:8px;cursor:pointer;
  background:white;border:1.5px solid var(--bg3);border-radius:8px;
  padding:8px 10px;transition:border-color .2s,background .2s;
  font-size:13px;color:var(--text2);font-weight:600;
}
.passport-opt:has(input:checked){
  border-color:var(--rose);background:var(--rose-pale);color:var(--rose);
}
.passport-opt input[type=radio]{accent-color:var(--rose);flex-shrink:0;}

/* GAME */
.hidden{display:none!important;}
#gameScreen{display:flex;flex-direction:column;height:100vh;}

/* HEADER */
header{
  background:var(--ivory);border-bottom:2px solid var(--bg3);padding:0 20px;height:52px;
  display:flex;align-items:center;justify-content:space-between;flex-shrink:0;
  box-shadow:0 2px 12px rgba(44,32,24,0.07);z-index:50;
}
.header-left{display:flex;align-items:center;gap:12px;min-width:0;}
.header-logo{display:flex;align-items:baseline;gap:10px;flex-shrink:0;}
.logo-main{font-family:'Cormorant Garamond',serif;font-size:24px;font-weight:700;color:var(--rose);}
.logo-sub{font-size:10px;font-weight:600;letter-spacing:3px;color:var(--text3);text-transform:uppercase;}
.return-home-btn{
  border:1.5px solid var(--bg3);
  background:white;color:var(--text2);
  border-radius:8px;
  padding:5px 9px;
  font-family:'Nunito',sans-serif;
  font-size:11px;font-weight:800;
  cursor:pointer;
  transition:border-color .2s,color .2s,background .2s;
}
.return-home-btn:hover{
  border-color:var(--rose-lt);
  color:var(--rose);
  background:var(--rose-pale);
}
.round-pill{
  background:var(--rose-pale);color:var(--rose);border:1.5px solid var(--rose-lt);
  border-radius:20px;padding:4px 12px;font-size:12px;font-weight:700;
}
.wall-pill{
  background:var(--gold-pale);color:var(--gold);border:1.5px solid var(--gold-lt);
  border-radius:20px;padding:4px 12px;font-size:12px;font-weight:700;
}

/* MAIN GAME AREA — table + chat side by side */
.game-main{
  display:flex;flex:1;overflow:hidden;
}

/* GAME TABLE */
.game-wrap{
  display:grid;
  grid-template-columns:120px 1fr 120px;
  grid-template-rows:minmax(100px,auto) 1fr minmax(155px,auto);
  gap:6px;padding:6px 6px 58px;
  flex:1;overflow:hidden;
}

/* PLAYER PANELS */
.player-panel{
  background:var(--ivory);border-radius:var(--r);border:1.5px solid var(--bg3);
  padding:6px 8px;display:flex;flex-direction:column;align-items:center;gap:4px;
  box-shadow:var(--shadow-card);transition:border-color .3s,box-shadow .3s;overflow:visible;
}
.player-panel.active{border-color:var(--rose-lt);box-shadow:0 4px 20px rgba(192,88,106,0.15);}

.player-panel.top{
  grid-column:2;grid-row:1;
  flex-direction:row;align-items:center;
  padding:6px 10px;
}
.player-panel.bottom{
  grid-column:2;grid-row:3;
  flex-direction:column;padding:6px 10px;
}
.player-panel.left{grid-column:1;grid-row:1 / -1;}
.player-panel.right{grid-column:3;grid-row:1 / -1;}

.player-name{font-size:11px;font-weight:700;color:var(--text2);}
.player-name.you{color:var(--rose);font-size:12px;}
.wind-chip{
  background:var(--bg2);border:1.5px solid var(--bg3);border-radius:6px;
  padding:2px 7px;font-family:'Noto Serif TC',serif;font-size:13px;
  color:var(--navy);font-weight:700;transition:all .3s;flex-shrink:0;
}
.wind-chip.active{background:var(--rose);border-color:var(--rose);color:white;}
.player-score{font-size:10px;color:var(--text3);font-weight:600;}
.player-score span{color:var(--gold);font-weight:700;}

/* HANDS */
.hand-row{
  display:flex;gap:3px;align-items:flex-end;
  flex-wrap:wrap;justify-content:center;
}

/* CENTER TABLE */
.center-table{
  grid-column:2;grid-row:2;
  background:linear-gradient(135deg,#e8f5f2 0%,#e0f0e8 50%,#e8f0f5 100%);
  border-radius:var(--r);border:2px solid var(--teal-pale);
  padding:12px;overflow:hidden;
  display:flex;flex-direction:column;
}
.discard-pool{
  flex:1;
  display:flex;flex-wrap:wrap;gap:2px;align-content:flex-start;
  justify-content:center;
  overflow-y:auto;
  border-radius:8px;
  box-shadow:inset 0 0 16px rgba(44,32,24,0.06);
  background:rgba(255,255,255,0.4);
  padding:10px;
  transition: background-color 0.2s, box-shadow 0.2s;
}
.discard-pool.drag-over {
  background: rgba(192, 88, 106, 0.15); /* light rose tint */
  box-shadow: inset 0 0 20px rgba(192, 88, 106, 0.2);
  border: 2px dashed var(--rose-lt);
}

/* BONUS + DISPLAYED */
.bonus-row{display:flex;gap:2px;flex-wrap:wrap;}
.displayed-row{display:flex;gap:2px;flex-wrap:wrap;justify-content:center;min-height:4px;}
.set-group{
  display:flex;gap:1px;margin-right:4px;padding:2px;
  background:var(--teal-pale);border-radius:4px;
}

/* TILES */
.tile{
  position:relative;display:inline-flex;flex-direction:column;
  align-items:center;justify-content:center;
  background:white;border-radius:var(--rt);box-shadow:var(--shadow-tile);
  border:1px solid var(--ivory3);cursor:pointer;user-select:none;
  transition:transform .15s cubic-bezier(.34,1.56,.64,1),box-shadow .15s;
  flex-shrink:0;overflow:hidden;
}
.tile.lg{width:60px;height:83px;}
.tile.md{width:44px;height:62px;}
.tile.sm{width:30px;height:44px;}
.tile:not(.static):hover{transform:translateY(-7px);box-shadow:0 10px 22px rgba(44,32,24,0.22);}
.tile.selected{
  transform:translateY(-14px)!important;
  box-shadow:0 14px 28px rgba(192,88,106,0.30)!important;
  border-color:var(--rose)!important;
}
.tile.static{cursor:default;}
.tile.static:hover{transform:none;box-shadow:var(--shadow-tile);}
.tile.dragging{opacity:0.2;transform:none;box-shadow:none;}
.tile-back{
  display:inline-flex;align-items:center;justify-content:center;
  background:linear-gradient(145deg,#2c3e5a,#4a6080);
  border-radius:var(--rt);box-shadow:var(--shadow-tile);
  border:1.5px solid #2c3e5a;flex-shrink:0;opacity:0.85;
}
.tile-back.lg{width:60px;height:83px;}
.tile-back.md{width:44px;height:62px;}
.tile-back.sm{width:30px;height:44px;}
.tile-back::after{
  content:'';display:block;width:60%;height:60%;
  border:2px solid rgba(255,255,255,0.15);border-radius:4px;
}

.tile-corner{
  position:absolute;
  top:3px;
  left:4px;
  font-size:9px;
  font-weight:700;
  font-family:'Nunito',sans-serif;
  line-height:1;
  z-index:3;
  color:#cc0000;
  pointer-events:none;
  text-shadow:0 0 3px white, 0 0 3px white;
}

.tile svg{display:block;position:relative;z-index:1;}
.tile.lg svg{width:51px;height:69px;}
.tile.md svg{width:36px;height:51px;}
.tile.sm svg{width:25px;height:36px;}

/* last discard highlight */
.last-discard-wrap{
  outline:2px solid var(--rose);
  outline-offset:1px;
  border-radius:5px;
}

/* ACTION BAR */
.action-bar{
  position:fixed;bottom:0;left:0;right:0;background:white;
  border-top:2px solid var(--bg3);padding:8px 16px;
  display:flex;align-items:center;justify-content:space-between;
  z-index:100;
  box-shadow:0 -4px 20px rgba(44,32,24,0.08);
}
.action-left, .action-right {
  flex: 1;
  display: flex;
  align-items: center;
  min-width: 0;
}
.action-left { justify-content: flex-start; }
.action-right { justify-content: flex-end; gap: 8px; }
.action-center {
  display: flex;
  align-items: center;
  gap: 7px;
  justify-content: center;
}
.action-hint{font-size:12px;font-weight:700;color:var(--text2);min-width:80px;white-space:nowrap;}
.btn{
  padding:7px 13px;border-radius:20px;font-family:'Nunito',sans-serif;
  font-size:12px;font-weight:700;cursor:pointer;border:none;
  transition:all .18s;white-space:nowrap;
}
.btn:disabled{opacity:0.35;cursor:not-allowed;transform:none!important;}
.btn-outline{background:white;color:var(--text2);border:2px solid var(--bg3);}
.btn-outline:not(:disabled):hover{border-color:var(--rose-lt);color:var(--rose);}
.btn-outline.can-act{
  border-color:var(--teal-lt);color:var(--teal);
  background:var(--teal-pale);
  animation:pulseBtn 1.8s ease-in-out infinite;
}
.btn-outline.can-act.timed {
  position: relative;
  overflow: hidden;
  background: transparent;
  z-index: 1;
}
.btn-outline.can-act.timed::before {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0; top: 0;
  background: var(--teal-pale);
  z-index: -1;
  transform-origin: left;
  animation: drainTimer var(--drain-time, 2500ms) linear forwards;
}
.btn-mahjong.can-act.timed {
  position: relative;
  overflow: hidden;
  z-index: 1;
}
.btn-mahjong.can-act.timed::before {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0; top: 0;
  background: rgba(255, 255, 255, 0.25);
  z-index: -1;
  transform-origin: left;
  animation: drainTimer var(--drain-time, 2500ms) linear forwards;
}
@keyframes pulseBtn{
  0%,100%{box-shadow:0 0 0 0 rgba(58,138,128,0.3);}
  50%{box-shadow:0 0 0 6px rgba(58,138,128,0);}
}
@keyframes drainTimer {
  0% { transform: scaleX(1); }
  100% { transform: scaleX(0); }
}
.btn-rose{background:var(--rose);color:white;}
.btn-rose:not(:disabled):hover{background:var(--rose-lt);}
.btn-mahjong{
  background:linear-gradient(135deg,var(--rose),#a04060);color:white;
  font-size:13px;padding:7px 18px;box-shadow:0 4px 16px rgba(192,88,106,0.35);
}
.btn-mahjong:not(:disabled):hover{transform:translateY(-2px) scale(1.02);}
.btn-mahjong.can-act{animation:pulseMj 1.4s ease-in-out infinite;}
@keyframes pulseMj{
  0%,100%{box-shadow:0 4px 16px rgba(192,88,106,0.35);}
  50%{box-shadow:0 4px 24px rgba(192,88,106,0.70);}
}
.status-area{text-align:right;font-size:12px;font-weight:600;color:var(--text3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* CHAT PANEL */
.chat-panel{
  width:220px;flex-shrink:0;
  background:var(--ivory);border-left:2px solid var(--bg3);
  display:flex;flex-direction:column;
  padding-bottom:58px;
  transition:width 0.22s ease;
  overflow:hidden;
}
.chat-panel.collapsed{
  width:28px;
}
.chat-panel.collapsed .chat-messages,
.chat-panel.collapsed #logMessages,
.chat-panel.collapsed .chat-input-row,
.chat-panel.collapsed .chat-tabs{
  display:none;
}
.chat-header-wrapper{
  display:flex;flex-direction:column;
}
.chat-header{
  padding:10px 8px 10px 12px;border-bottom:1px solid var(--bg3);
  font-size:12px;font-weight:700;color:var(--text2);
  letter-spacing:1px;text-transform:uppercase;
  display:flex;align-items:center;justify-content:space-between;
  white-space:nowrap;
}
.chat-tabs{
  display:flex;border-bottom:1px solid var(--bg3);
  background:var(--bg2);
}
.chat-tab{
  flex:1;padding:8px;font-size:11px;font-weight:600;
  border:none;background:transparent;color:var(--text3);
  cursor:pointer;text-transform:uppercase;letter-spacing:0.5px;
  border-bottom:2px solid transparent;
  transition:all 0.2s ease;
}
.chat-tab:hover{
  background:var(--ivory);color:var(--text2);
}
.chat-tab.active{
  color:var(--rose);border-bottom-color:var(--rose);
  background:var(--ivory);
}
.chat-toggle{
  background:none;border:none;cursor:pointer;
  color:var(--text3);line-height:1;padding:4px;
  border-radius:6px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  transition:all .2s ease;
}
.chat-toggle:hover{
  background:var(--rose-pale);
  color:var(--rose);
}
.chat-panel:not(.collapsed) .chat-toggle {
  color: var(--rose);
}
.chat-panel.collapsed .icon-arrow {
  display: none;
}
.chat-panel:not(.collapsed) .icon-chat {
  display: none;
}
.chat-panel.collapsed .chat-header-label{display:none;}
.chat-panel.collapsed .chat-header{
  padding:10px 0;justify-content:center;border-bottom:none;
}
.chat-messages{
  flex:1;overflow-y:auto;padding:8px 10px;
  display:flex;flex-direction:column;gap:4px;
}
#logMessages{
  flex:1;overflow-y:auto;padding:8px 10px;
  display:flex;flex-direction:column;gap:4px;
}
#logMessages.hidden{
  display:none;
}
.chat-msg{
  font-size:13px;color:var(--text);font-weight:500;
  line-height:1.4;word-break:break-word;
}
.chat-msg.log{
  font-size:11px;color:var(--text3);font-style:italic;font-weight:400;
}
.chat-input-row{
  display:flex;gap:6px;padding:8px 10px;
  border-top:1px solid var(--bg3);
}
.chat-input{
  flex:1;padding:6px 10px;border:1.5px solid var(--bg3);
  border-radius:10px;font-family:'Nunito',sans-serif;
  font-size:12px;outline:none;
}
.chat-input:focus{border-color:var(--rose-lt);}
.chat-send{
  padding:6px 10px;background:var(--rose);color:white;
  border:none;border-radius:10px;font-family:'Nunito',sans-serif;
  font-size:12px;font-weight:700;cursor:pointer;
}
.chat-send:hover{background:var(--rose-lt);}

/* MODALS */
.overlay{
  position:fixed;inset:0;background:rgba(44,32,24,0.55);
  display:flex;align-items:center;justify-content:center;z-index:200;backdrop-filter:blur(6px);
}
.overlay.hidden{display:none;}
.modal-box{
  background:white;border-radius:20px;padding:36px;max-width:500px;width:92%;
  text-align:center;box-shadow:0 20px 60px rgba(44,32,24,0.20);border:2px solid var(--bg3);
}
.modal-box h2{
  font-family:'Cormorant Garamond',serif;font-size:36px;font-weight:700;
  color:var(--rose);margin-bottom:8px;
}
.modal-box p{color:var(--text2);font-size:15px;line-height:1.6;margin-bottom:22px;}
.modal-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;}
.score-table{width:100%;border-collapse:collapse;margin:14px 0;font-size:14px;}
.score-table th{
  color:var(--text3);font-weight:600;padding:6px 12px;
  border-bottom:2px solid var(--bg3);text-align:left;
  font-size:12px;letter-spacing:1px;text-transform:uppercase;
}
.score-table td{padding:8px 12px;border-bottom:1px solid var(--bg3);}
.score-table .win-row td{color:var(--rose);font-weight:700;}
.score-table .loss-row td{color:var(--text3);}

/* WINNING HAND DISPLAY */
.win-hand-section{
  margin:0 0 18px;
}
.win-hand-label{
  font-size:11px;font-weight:700;color:var(--text3);
  letter-spacing:2px;text-transform:uppercase;margin-bottom:8px;
}
.win-hand-tiles{
  display:flex;flex-wrap:wrap;gap:4px;align-items:flex-end;
  background:linear-gradient(135deg,#e8f5f2,#e0f0e8);
  border-radius:12px;padding:12px 14px;
  border:1.5px solid var(--teal-pale);
  min-height:60px;
}
.win-hand-set{
  display:flex;gap:2px;align-items:flex-end;
  background:rgba(255,255,255,0.55);
  border-radius:8px;padding:4px 6px;
  border:1px solid var(--teal-pale);
  margin-right:4px;
}
.win-hand-set-label{
  font-size:9px;font-weight:700;color:var(--teal);
  letter-spacing:1px;text-transform:uppercase;
  text-align:center;margin-bottom:2px;
}
.win-hand-group{
  display:flex;flex-direction:column;align-items:center;
}

/* TOAST */
.toast{
  position:fixed;top:70px;left:50%;transform:translateX(-50%) translateY(-10px);
  background:var(--navy);color:white;padding:10px 20px;border-radius:20px;
  font-size:13px;font-weight:600;z-index:300;opacity:0;transition:all .3s;
  pointer-events:none;white-space:nowrap;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

/* MAHJONG DECLARING BANNER */
.mj-decl-banner{
  position:fixed;top:72px;left:50%;transform:translateX(-50%) translateY(-8px);
  background:linear-gradient(135deg,var(--rose),var(--gold));color:white;
  padding:12px 24px;border-radius:16px;
  font-size:14px;font-weight:600;z-index:290;opacity:0;
  transition:opacity .35s,transform .35s;pointer-events:none;
  display:flex;align-items:center;gap:10px;
  box-shadow:0 6px 24px rgba(44,32,24,0.22);white-space:nowrap;
}
.mj-decl-banner.show{opacity:1;transform:translateX(-50%) translateY(0);}
.mj-decl-banner-icon{font-size:20px;line-height:1;}
.mj-decl-banner-dots span{
  display:inline-block;animation:mjDot 1.2s infinite;opacity:0;
}
.mj-decl-banner-dots span:nth-child(2){animation-delay:.25s;}
.mj-decl-banner-dots span:nth-child(3){animation-delay:.5s;}
@keyframes mjDot{
  0%,80%,100%{opacity:0;transform:translateY(0);}
  40%{opacity:1;transform:translateY(-3px);}
}

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;600;700&family=Nunito:wght@400;500;600;700&family=Noto+Serif+TC:wght@400;700&display=swap');

/* MAHJONG DECLARATION */
.mahjong-decl-modal{
  max-width:640px;width:min(96vw,640px);
  max-height:calc(100vh - 44px);
  padding:0;text-align:left;overflow:hidden;
  display:flex;flex-direction:column;
}
.mahjong-decl-head{
  padding:22px 28px 10px;
  flex-shrink:0;
}
.mahjong-decl-head h2{
  margin:0;
}
.mahjong-decl-body{
  padding:0 28px 14px;
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  scrollbar-color:var(--bg3) transparent;
}
.mahjong-decl-actions{
  flex-shrink:0;
  justify-content:flex-end;
  padding:12px 28px 18px;
  border-top:1px solid var(--bg3);
  background:linear-gradient(180deg,rgba(255,255,255,0.92),white);
}
.passport-decl-panel{
  margin-bottom:12px;
  background:var(--ivory);
  border:1.5px solid var(--bg3);
  border-radius:8px;
  padding:12px;
}
.passport-decl-title{
  font-size:12px;font-weight:800;color:var(--text2);
  letter-spacing:1px;text-transform:uppercase;
  margin-bottom:3px;
}
.passport-decl-copy{
  color:var(--text3)!important;
  font-size:13px!important;
  line-height:1.4!important;
  margin:0 0 9px!important;
}
.passport-decl-select{
  width:100%;padding:9px 10px;
  border:1.5px solid var(--bg3);
  border-radius:8px;background:white;
  font-family:'Nunito',sans-serif;
  font-size:14px;font-weight:600;color:var(--text);
  outline:none;
}
.passport-decl-select:focus{
  border-color:var(--rose-lt);
  box-shadow:0 0 0 3px var(--rose-pale);
}
.mahjong-decl-instruction{
  margin:0 0 10px!important;
  color:var(--text2)!important;
  font-size:14px!important;
  line-height:1.5!important;
}
.decl-sets-container{
  display:flex;flex-direction:column;gap:7px;
}
.decl-empty-state{
  padding:12px;
  border:1.5px dashed var(--bg3);
  border-radius:8px;
  background:var(--ivory);
  color:var(--text3);
  font-size:13px;
  line-height:1.4;
}
.decl-set-row{
  display:flex;align-items:center;gap:10px;
}
.decl-set-label{
  font-size:11px;font-weight:800;color:var(--text3);
  letter-spacing:1px;text-transform:uppercase;
  min-width:74px;text-align:right;flex-shrink:0;
}
.decl-section-label{
  font-size:11px;font-weight:800;color:var(--text2);
  letter-spacing:1px;text-transform:uppercase;
  margin-top:3px;padding-top:4px;
}
.decl-slot{
  display:flex;gap:3px;flex-wrap:nowrap;
  min-height:50px;padding:4px 8px;
  background:var(--ivory);border-radius:8px;
  border:2px dashed var(--bg3);
  transition:border-color .2s;
  flex:1;align-items:center;min-width:0;
}
.decl-slot.locked{
  background:var(--teal-pale);
  border:2px solid var(--teal-pale);
  opacity:0.8;
}
.decl-slot.drag-over{
  border-color:var(--rose);
  background:var(--rose-pale);
}
.decl-slot-placeholder{
  font-size:11px;color:var(--text3);font-style:italic;
  padding:4px 8px;
}
.decl-hand-area{
  margin-top:10px;
}
.decl-hand-label{
  font-size:11px;font-weight:800;color:var(--text3);
  letter-spacing:1px;text-transform:uppercase;
  margin-bottom:6px;
}
.decl-hand-tiles{
  display:flex;gap:4px;flex-wrap:wrap;
  min-height:54px;padding:8px;
  background:var(--ivory);
  border-radius:8px;
  border:1.5px dashed var(--bg3);
  max-height:154px;
  overflow-y:auto;
  align-content:flex-start;
}
.decl-meld-chip{
  display:flex;gap:3px;align-items:center;
  padding:3px;border-radius:8px;
  border:1.5px solid var(--teal-lt);
  background:var(--teal-pale);
  cursor:grab;
}
.lock-icon{
  font-size:11px;color:var(--teal);margin-left:4px;
}

@media(max-width:560px){
  .mahjong-decl-modal{
    width:96vw;max-height:calc(100vh - 24px);
  }
  .mahjong-decl-head{
    padding:18px 18px 8px;
  }
  .mahjong-decl-body{
    padding:0 18px 12px;
  }
  .mahjong-decl-actions{
    padding:10px 18px 16px;
  }
  .decl-set-row{
    align-items:stretch;gap:6px;
  }
  .decl-set-label{
    min-width:58px;font-size:10px;
  }
  .decl-slot{
    padding:4px 6px;
  }
}