/* ===== 난세: 삼국지 — Global Styles ===== */
*{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#0a0a0f;--bg2:#111118;--bg3:#1a1a24;
  --surface:#16161f;--surface2:#1e1e2a;--surface3:#252535;
  --gold:#c8a84e;--gold-dim:#8a7535;--gold-glow:rgba(200,168,78,.15);
  --red:#8b2020;--red-light:#c43030;
  --green:#2d8a4e;--green-light:#3dba6a;
  --blue:#3a5a8a;
  --text:#e0d5c0;--text-dim:#8a8578;--text-muted:#5a574e;
  --font-serif:'Noto Serif KR',serif;
  --border:rgba(200,168,78,.12);--border-h:rgba(200,168,78,.25);
}
body{font-family:'Noto Serif KR',serif;background:var(--bg);color:var(--text);line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:var(--gold);text-decoration:none}
button{font-family:'Noto Serif KR',serif;cursor:pointer}

/* ===== Screens ===== */
.screen{display:none;min-height:100vh}
.screen.active{display:flex}

/* ===== Title Screen ===== */
#title-screen{
  align-items:center;justify-content:center;position:relative;overflow:hidden;
  background:radial-gradient(ellipse at 50% 30%,#1a1520 0%,#0a0a0f 70%);
}
.title-bg{
  position:absolute;inset:0;
  background:
    radial-gradient(circle at 20% 80%,rgba(139,32,32,.08) 0%,transparent 50%),
    radial-gradient(circle at 80% 20%,rgba(200,168,78,.05) 0%,transparent 50%),
    radial-gradient(circle at 50% 50%,rgba(30,30,42,.5) 0%,transparent 80%);
  animation:bgPulse 8s ease-in-out infinite alternate;
}
@keyframes bgPulse{
  0%{opacity:.7}100%{opacity:1}
}
.title-content{
  text-align:center;position:relative;z-index:1;padding:2rem;
}
.title-main{
  font-size:8rem;font-weight:900;color:var(--gold);
  text-shadow:0 0 60px rgba(200,168,78,.3),0 4px 20px rgba(0,0,0,.8);
  line-height:1;letter-spacing:.15em;
  animation:titleFade 1.5s ease-out;
}
.title-sub{
  font-size:2.8rem;font-weight:700;color:var(--text);
  letter-spacing:.4em;margin-top:.3rem;
  animation:titleFade 1.5s ease-out .3s both;
}
.title-en{
  font-size:.95rem;color:var(--text-dim);letter-spacing:.2em;
  margin-top:.8rem;text-transform:uppercase;
  animation:titleFade 1.5s ease-out .5s both;
}
.title-tagline{
  font-size:1.1rem;color:var(--text-muted);margin-top:2.5rem;
  font-style:italic;letter-spacing:.05em;
  animation:titleFade 1.5s ease-out .7s both;
}
.title-buttons{
  margin-top:2.5rem;display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;
  animation:titleFade 1.5s ease-out .9s both;
}
.btn-gold{
  background:linear-gradient(135deg,var(--gold),#a08030);
  color:#0a0a0f;border:none;padding:.85rem 2.5rem;border-radius:6px;
  font-size:1.1rem;font-weight:700;letter-spacing:.08em;
  transition:all .2s;
}
.btn-gold:hover{transform:translateY(-2px);box-shadow:0 6px 25px rgba(200,168,78,.3)}
.btn-outline{
  background:transparent;color:var(--gold);
  border:1px solid var(--gold-dim);padding:.85rem 2.5rem;border-radius:6px;
  font-size:1.1rem;font-weight:600;letter-spacing:.08em;
  transition:all .2s;
}
.btn-outline:hover{border-color:var(--gold);background:var(--gold-glow)}
.title-credit{
  margin-top:3rem;font-size:.8rem;color:var(--text-muted);letter-spacing:.1em;
  animation:titleFade 1.5s ease-out 1.1s both;
}
@keyframes titleFade{
  from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}
}

/* ===== Game Screen ===== */
#game-screen{display:none;flex-direction:column;min-height:100vh}
#game-screen.active{display:flex}
#game-container{flex:1;display:flex;flex-direction:column}

/* ===== Play Chat Layout (from samguk-ai) ===== */
.play-chat-layout{display:flex;height:100vh;overflow:hidden}

/* Sidebar */
.play-chat-sidebar{
  width:280px;min-width:280px;flex-shrink:0;background:var(--surface);
  border-right:1px solid var(--border);overflow-y:auto;overflow-x:hidden;
  padding:.75rem;display:flex;flex-direction:column;gap:.5rem;
  max-height:100vh;
}
.play-chat-sidebar-toggle{display:none}

/* Profile */
.play-chat-profile{background:var(--surface2);border-radius:10px;padding:.75rem;border:1px solid var(--border)}
.play-chat-profile-header{display:flex;align-items:center;gap:.6rem;margin-bottom:.5rem}
.play-chat-profile-portrait{
  width:42px;height:42px;border-radius:50%;
  background:linear-gradient(135deg,var(--gold),#a08030);
  display:flex;align-items:center;justify-content:center;
  font-size:1.2rem;font-weight:900;color:#0a0a0f;
}
.play-chat-profile-name{font-size:1.05rem;font-weight:700;color:var(--gold)}
.play-chat-profile-loc{font-size:.82rem;color:var(--text-dim)}
.play-chat-profile-stats{display:flex;flex-direction:column;gap:4px}
.play-chat-stat-row{display:flex;align-items:center;gap:.4rem}
.play-chat-stat-name{font-size:.75rem;color:var(--text-dim);width:28px;flex-shrink:0}
.play-chat-stat-bar-wrap{flex:1;height:6px;background:var(--bg2);border-radius:3px;overflow:hidden}
.play-chat-stat-bar{height:100%;background:linear-gradient(90deg,var(--gold-dim),var(--gold));border-radius:3px;transition:width .3s}
.play-chat-stat-val{font-size:.75rem;color:var(--text);width:24px;text-align:right;flex-shrink:0}

/* Resources */
.play-chat-resources{background:var(--surface2);border-radius:10px;padding:.6rem .75rem;border:1px solid var(--border)}
.play-chat-res-date{font-size:.78rem;color:var(--text-dim);margin-bottom:.4rem}
.play-chat-res-items{display:grid;grid-template-columns:1fr 1fr;gap:.3rem}
.play-chat-res-item{display:flex;align-items:center;gap:.3rem;font-size:.85rem}
.play-chat-res-item.danger{color:var(--red-light)}
.play-chat-res-icon{font-size:.9rem}
.play-chat-res-val{font-weight:600}
.play-chat-res-delta{font-size:.72rem;font-weight:700;margin-left:2px;padding:.1rem .3rem;border-radius:3px}
.play-chat-res-delta.positive{color:var(--green-light);background:rgba(45,138,78,.12)}
.play-chat-res-delta.negative{color:var(--red-light);background:rgba(139,32,32,.12)}

/* Quests */
.play-chat-quests,.play-chat-advisors{background:var(--surface2);border-radius:10px;padding:.6rem .75rem;border:1px solid var(--border)}
.play-chat-section-title{font-size:.82rem;font-weight:700;color:var(--gold);margin-bottom:.4rem}
.play-chat-quest-item{display:flex;align-items:center;gap:.35rem;font-size:.82rem;padding:.2rem 0;color:var(--text-dim)}
.play-chat-quest-item.in-progress{color:var(--text)}
.play-chat-quest-icon{font-size:.75rem;flex-shrink:0}
.play-chat-quest-title{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.play-chat-quest-days{font-size:.72rem;color:var(--text-muted);flex-shrink:0}
.play-chat-quest-empty{font-size:.8rem;color:var(--text-muted);font-style:italic}
.play-chat-quest-completed{font-size:.78rem;color:var(--green-light);margin-top:.3rem}

/* Economy */
.play-chat-economy{background:var(--surface2);border-radius:10px;padding:.6rem .75rem;border:1px solid var(--border)}
.play-chat-econ-item{display:flex;justify-content:space-between;align-items:center;padding:.2rem 0;cursor:help;font-size:.82rem}
.play-chat-econ-name{color:var(--text)}
.play-chat-econ-tax{color:var(--gold);font-size:.75rem;font-weight:600}
.play-chat-econ-total{margin-top:.4rem;padding-top:.4rem;border-top:1px solid var(--border);font-size:.75rem;color:var(--text-muted);display:flex;gap:.5rem;flex-wrap:wrap}
.play-chat-econ-empty{font-size:.8rem;color:var(--text-muted);font-style:italic}

/* Factions */
.play-chat-factions{background:var(--surface2);border-radius:10px;padding:.6rem .75rem;border:1px solid var(--border)}
.play-chat-faction-item{display:flex;align-items:center;gap:.4rem;padding:.3rem 0;cursor:help;border-bottom:1px solid rgba(255,255,255,.03)}
.play-chat-faction-item:last-child{border-bottom:none}
.play-chat-faction-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.play-chat-faction-info{flex:1;min-width:0;overflow:hidden}
.play-chat-faction-name{font-size:.85rem;font-weight:600;display:block}
.play-chat-faction-detail{font-size:.7rem;color:var(--text-muted);display:block;word-break:keep-all}
.play-chat-faction-rel{font-size:.7rem;font-weight:700;flex-shrink:0}
.play-chat-faction-empty{font-size:.8rem;color:var(--text-muted);font-style:italic}

/* Advisors compact */
.play-chat-advisor-item{display:flex;align-items:center;gap:.4rem;padding:.15rem 0}
.play-chat-advisor-portrait{
  width:26px;height:26px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:.75rem;font-weight:700;color:#0a0a0f;
  background:var(--gold-dim);
}
.play-chat-advisor-portrait.wei{background:#5577aa}
.play-chat-advisor-portrait.shu{background:#55aa77}
.play-chat-advisor-portrait.wu{background:#cc6655}
.play-chat-advisor-name{font-size:.85rem}
.play-chat-advisor-role{font-size:.72rem;color:var(--text-muted);margin-left:auto;flex-shrink:0}
.play-chat-advisor-empty{font-size:.8rem;color:var(--text-muted);font-style:italic}

/* Save/Load */
.play-chat-saveload{display:flex;gap:.4rem;flex-wrap:wrap}
.play-chat-sl-btn{
  flex:1;min-width:60px;padding:.45rem .5rem;
  background:var(--surface2);border:1px solid var(--border);border-radius:6px;
  color:var(--text-dim);font-size:.8rem;font-weight:600;transition:all .2s;
}
.play-chat-sl-btn:hover{border-color:var(--border-h);color:var(--text)}
.play-chat-sl-btn.quit{color:var(--red)}

/* Chat Area */
.play-chat-area{flex:1;display:flex;flex-direction:column;min-width:0}
.play-chat-header{
  display:flex;align-items:center;gap:.75rem;
  padding:.6rem 1rem;background:var(--surface);border-bottom:1px solid var(--border);
  flex-shrink:0;
}
.play-chat-header-title{font-size:1rem;font-weight:700;color:var(--gold);flex:1}
.play-chat-header-date{font-size:.82rem;color:var(--text-dim)}
.play-chat-reset-btn{
  background:var(--red);color:#fff;border:none;padding:.35rem .75rem;
  border-radius:5px;font-size:.78rem;font-weight:600;transition:all .2s;
}
.play-chat-reset-btn:hover{background:var(--red-light)}

/* Chat body */
.play-chat-body{flex:1;overflow-y:auto;padding:1rem;display:flex;flex-direction:column;gap:.6rem}
.play-chat-body::-webkit-scrollbar{width:6px}
.play-chat-body::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}

/* Chat messages */
.play-chat-msg{padding:.75rem 1rem;border-radius:10px;max-width:85%;animation:msgFade .3s ease-out}
@keyframes msgFade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.play-chat-msg-narration,.play-chat-msg-result{
  background:var(--surface2);border:1px solid var(--border);
  align-self:flex-start;display:flex;gap:.5rem;max-width:90%;
}
.play-chat-msg-icon{font-size:1.1rem;flex-shrink:0;margin-top:2px}
.play-chat-msg-text{font-size:.92rem;line-height:1.7;color:var(--text);white-space:pre-line}
.play-chat-msg-content{display:flex;flex-direction:column;gap:.4rem}
.play-chat-msg-player{
  background:linear-gradient(135deg,rgba(200,168,78,.12),rgba(200,168,78,.06));
  border:1px solid rgba(200,168,78,.2);align-self:flex-end;
}
.play-chat-msg-world{
  background:rgba(58,90,138,.15);border:1px solid rgba(58,90,138,.25);
  align-self:flex-start;display:flex;gap:.5rem;
}
.play-chat-msg-quest{
  background:rgba(45,138,78,.1);border:1px solid rgba(45,138,78,.2);
  align-self:flex-start;display:flex;gap:.5rem;
}
.play-chat-msg-system{
  background:var(--surface);border:1px solid var(--border);
  align-self:center;text-align:center;font-size:.85rem;color:var(--text-dim);
}
.play-chat-msg-loading{
  align-self:flex-start;display:flex;align-items:center;gap:.5rem;
  background:var(--surface2);border:1px solid var(--border);color:var(--text-dim);font-size:.85rem;
}
.play-chat-loading-dots{display:flex;gap:4px}
.play-chat-loading-dots::before,.play-chat-loading-dots::after,
.play-chat-loading-dots{content:'';display:block}
@keyframes dotPulse{0%,80%{opacity:.3}40%{opacity:1}}

/* Resource changes in result */
.play-chat-resource-changes{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.2rem}
.play-chat-res-change{font-size:.8rem;padding:.15rem .5rem;border-radius:4px;font-weight:600}
.play-chat-res-change.positive{background:rgba(45,138,78,.15);color:var(--green-light)}
.play-chat-res-change.negative{background:rgba(139,32,32,.15);color:var(--red-light)}
.play-chat-days-elapsed{font-size:.78rem;color:var(--text-muted)}

/* Chat footer */
.play-chat-footer{flex-shrink:0;border-top:1px solid var(--border);background:var(--surface)}

/* Advisor cards */
.play-advisor-cards{
  display:flex;gap:.4rem;padding:.5rem .75rem;overflow-x:auto;
  scrollbar-width:thin;
}
.play-advisor-cards::-webkit-scrollbar{height:4px}
.play-advisor-cards::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}
.play-advisor-card{
  flex-shrink:0;width:220px;padding:.6rem .7rem;
  background:var(--surface2);border:1px solid var(--border);border-radius:8px;
  text-align:left;color:var(--text);transition:all .2s;
}
.play-advisor-card:hover{border-color:var(--border-h);transform:translateY(-2px);box-shadow:0 4px 15px rgba(0,0,0,.3)}
.play-advisor-card-advised{border-left:3px solid var(--gold)}
.play-advisor-card-action{border-left:3px solid var(--text-muted)}
.play-advisor-card-header{display:flex;align-items:center;gap:.35rem;margin-bottom:.3rem}
.play-advisor-card-emoji{font-size:1rem}
.play-advisor-card-name{font-size:.82rem;font-weight:700;color:var(--gold)}
.play-advisor-card-action .play-advisor-card-name{color:var(--text-dim)}
.play-advisor-card-cat{font-size:.75rem;margin-left:auto}
.play-advisor-card-text{font-size:.82rem;line-height:1.5;color:var(--text-dim)}
.play-advisor-card-bonus{font-size:.75rem;color:var(--green-light);margin-top:.25rem}

/* Chat input */
.play-chat-input-area{display:flex;gap:.5rem;padding:.6rem .75rem}
.play-chat-input{
  flex:1;background:var(--bg2);border:1px solid var(--border);border-radius:8px;
  padding:.6rem .85rem;color:var(--text);font-size:.92rem;font-family:'Noto Serif KR',serif;
  outline:none;transition:border-color .2s;
}
.play-chat-input:focus{border-color:var(--gold)}
.play-chat-input::placeholder{color:var(--text-muted)}
.play-chat-input:disabled{opacity:.5}
.play-chat-send-btn{
  background:var(--gold);color:#0a0a0f;border:none;
  width:42px;height:42px;border-radius:8px;font-size:1.1rem;
  display:flex;align-items:center;justify-content:center;transition:all .2s;
}
.play-chat-send-btn:hover{background:#d4b85a}

/* ===== Character Select (in Play.js) ===== */
.page-title{font-size:2rem;font-weight:900;color:var(--gold);text-align:center;padding:1.5rem 0 .5rem;letter-spacing:.05em}
.page-subtitle{text-align:center;color:var(--text-dim);font-size:.95rem;margin-bottom:1.5rem}
.play-char-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1rem;padding:1rem;max-width:960px;margin:0 auto}
.play-char-card{
  background:var(--surface2);border:1px solid var(--border);border-radius:12px;
  padding:1.2rem;cursor:pointer;transition:all .2s;
}
.play-char-card:hover{border-color:var(--gold);transform:translateY(-3px);box-shadow:0 8px 30px rgba(200,168,78,.1)}
.play-char-portrait{
  width:56px;height:56px;border-radius:50%;margin:0 auto .6rem;
  background:linear-gradient(135deg,var(--gold),#a08030);
  display:flex;align-items:center;justify-content:center;
  font-size:1.6rem;font-weight:900;color:#0a0a0f;
}
.play-char-card-name{font-size:1.2rem;font-weight:700;color:var(--gold);text-align:center}
.play-char-card-desc{font-size:.85rem;color:var(--text-dim);text-align:center;margin-top:.3rem}
.play-char-card-resources{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:.6rem;justify-content:center}
.play-resource-pill{font-size:.78rem;background:var(--surface3);padding:.2rem .5rem;border-radius:4px;color:var(--text-dim)}
.play-char-card-location{font-size:.82rem;color:var(--text-dim);text-align:center;margin-top:.4rem}
.play-char-card-stats{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:.4rem;justify-content:center}
.play-char-stat-pill{font-size:.75rem;background:var(--surface3);padding:.15rem .4rem;border-radius:3px;color:var(--text-dim)}

/* Save/Load screens */
.play-load-panel{max-width:500px;margin:2rem auto;padding:1rem}
.play-load-title{font-size:1.3rem;font-weight:700;color:var(--gold);margin-bottom:1rem;text-align:center}
.play-save-slot{
  padding:.8rem 1rem;border:1px solid var(--border);border-radius:8px;
  margin-bottom:.5rem;cursor:pointer;transition:all .2s;
}
.play-save-slot:hover{border-color:var(--gold)}
.play-save-slot.empty{color:var(--text-muted);cursor:default}
.play-save-slot.empty:hover{border-color:var(--border)}
.play-save-info{font-weight:600;color:var(--text)}
.play-save-date{font-size:.8rem;color:var(--text-dim);display:block;margin-top:.2rem}
.play-new-game-btn{
  display:block;width:100%;margin-top:1rem;padding:.7rem;
  background:var(--gold);color:#0a0a0f;border:none;border-radius:8px;
  font-size:1rem;font-weight:700;
}

/* Modal */
.play-modal-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:1000;
  display:flex;align-items:center;justify-content:center;
}
.play-modal-box{
  background:var(--surface);border:1px solid var(--border);border-radius:12px;
  padding:1.5rem;max-width:400px;width:90%;
}
.play-modal-box h3{color:var(--gold);margin-bottom:1rem;text-align:center}
.play-save-slot-btn{
  display:block;width:100%;padding:.6rem;margin-bottom:.4rem;
  background:var(--surface2);border:1px solid var(--border);border-radius:6px;
  color:var(--text);font-size:.9rem;text-align:left;cursor:pointer;transition:all .15s;
}
.play-save-slot-btn:hover{border-color:var(--gold)}
.play-modal-close-btn{
  display:block;width:100%;margin-top:.6rem;padding:.5rem;
  background:transparent;border:1px solid var(--border);border-radius:6px;
  color:var(--text-dim);font-size:.9rem;
}

/* Ending */
.play-ending{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-height:100vh;text-align:center;padding:2rem;
}
.play-ending-icon{font-size:4rem;margin-bottom:1rem}
.play-ending-title{font-size:1.8rem;font-weight:900;color:var(--gold)}
.play-ending-subtitle{color:var(--text-dim);margin-top:.5rem}
.play-ending-restart{
  margin-top:1.5rem;background:var(--gold);color:#0a0a0f;border:none;
  padding:.7rem 2rem;border-radius:8px;font-size:1rem;font-weight:700;
}

/* ===== Modal ===== */
.hidden{display:none!important}
.modal-close{position:absolute;top:.5rem;right:.75rem;background:none;border:none;color:var(--text-muted);font-size:1.5rem;cursor:pointer;line-height:1}
.modal-close:hover{color:var(--text)}

/* ===== Codex ===== */
.codex-header{display:flex;align-items:center;gap:1rem;padding:1rem 1.5rem;background:var(--surface2);border-bottom:1px solid var(--border)}
.codex-back{background:none;border:1px solid var(--border);color:var(--gold);padding:.4rem .8rem;border-radius:6px;cursor:pointer;font-size:.85rem}
.codex-back:hover{background:var(--gold);color:#111}
.codex-title{margin:0;color:var(--gold);font-family:'Noto Serif KR',serif;font-size:1.2rem}
.codex-tabs{display:flex;gap:.5rem;padding:.75rem 1.5rem;background:var(--surface);border-bottom:1px solid var(--border);flex-wrap:wrap}
.codex-tab{background:var(--surface2);border:1px solid var(--border);color:var(--text-muted);padding:.4rem 1rem;border-radius:20px;cursor:pointer;font-size:.85rem;transition:all .2s}
.codex-tab.active{background:var(--gold);color:#111;border-color:var(--gold);font-weight:600}
.codex-tab:hover:not(.active){color:var(--text);border-color:var(--gold-dim)}
.codex-content{flex:1;overflow-y:auto;padding:1rem 1.5rem;max-height:calc(100vh - 120px)}
.codex-content .map-leaflet{height:60vh!important;min-height:400px}
.codex-content .map-page-wrapper{display:flex;gap:1rem;flex-wrap:wrap}
#codex-screen{display:flex;flex-direction:column;background:var(--bg);min-height:100vh}

/* ===== Accordion ===== */
.play-accordion{background:var(--surface2);border-radius:10px;border:1px solid var(--border);overflow:hidden}
.play-accordion-header{display:flex;justify-content:space-between;align-items:center;padding:.45rem .7rem;cursor:pointer;user-select:none;transition:background .15s}
.play-accordion-header:hover{background:rgba(200,168,78,.06)}
.play-accordion-title{font-size:.82rem;font-weight:600;color:var(--gold)}
.play-accordion-arrow{font-size:.7rem;color:var(--text-muted);transition:transform .2s}
.play-accordion-body{display:none;padding:0 .7rem .5rem}
.play-accordion.open .play-accordion-body{display:block}
.play-accordion-body>*{border:none;border-radius:0;background:none;padding:0}

/* Sidebar codex button */
.play-sidebar-codex-btn{width:100%;padding:.5rem;background:var(--surface2);border:1px solid var(--border);border-radius:10px;color:var(--gold);font-size:.85rem;font-weight:600;cursor:pointer;transition:all .15s}
.play-sidebar-codex-btn:hover{background:var(--gold);color:#111}

/* ===== Tooltips ===== */
.play-chat-res-item[title],.play-chat-stat-row[title],.play-chat-advisor-item[title]{cursor:help;position:relative}

/* ===== Mobile ===== */
@media(max-width:768px){
  .title-main{font-size:5rem}
  .title-sub{font-size:2rem}
  .play-chat-layout{flex-direction:column}
  .play-chat-sidebar{
    display:none;position:fixed;left:0;top:0;bottom:0;z-index:100;
    width:280px;box-shadow:4px 0 20px rgba(0,0,0,.5);
  }
  .play-chat-sidebar.open{display:flex}
  .play-chat-sidebar-toggle{
    display:flex;align-items:center;justify-content:center;
    background:var(--surface2);border:1px solid var(--border);border-radius:6px;
    width:32px;height:32px;font-size:1rem;color:var(--text);
  }
  .play-advisor-card{width:180px}
  .play-char-grid{grid-template-columns:1fr;padding:.75rem}
}
@media(max-width:480px){
  .title-main{font-size:3.5rem}
  .title-sub{font-size:1.5rem}
  .title-en{font-size:.8rem}
}