.account-open{border:0;background:none;color:var(--green);font-weight:700;text-decoration:underline;padding:4px 6px;margin-left:8px}
#save-status[data-mode=conflict],#save-status[data-mode=offline]{color:var(--red)}
.account-dialog{width:min(480px,calc(100% - 28px));max-height:calc(100svh - 32px);overflow:auto;padding:30px;border:0;border-radius:18px;background:var(--white);color:var(--ink);box-shadow:0 22px 90px #163d3533;position:relative}
.account-dialog::backdrop{background:#163d3566}
.account-dialog h2{font:800 26px Manrope,system-ui,sans-serif;letter-spacing:-1px;margin:0 30px 10px 0;color:var(--green)}
.account-dialog h3{font:700 16px Manrope,system-ui,sans-serif;margin:22px 0 6px}
.account-dialog p{line-height:1.6;margin:0 0 10px}
.account-dialog .eyebrow{font-size:10px;letter-spacing:4px;color:var(--muted);margin:0 0 8px}
.account-close{position:absolute;top:14px;right:16px;border:0;background:none;font-size:26px;color:var(--muted)}
.account-form{display:grid;gap:6px}
.account-form label{font-weight:600;font-size:13px;margin-top:6px}
.account-form input{border:1px solid var(--line);border-radius:10px;padding:11px 12px;background:var(--paper)}
.account-actions{display:flex;flex-wrap:wrap;gap:10px;margin:12px 0}
.account-dialog .primary-button,.account-dialog .secondary-button{border-radius:10px;padding:11px 16px;font-weight:700;border:1px solid var(--green)}
.account-dialog .primary-button{background:var(--green);color:var(--lime)}
.account-dialog .secondary-button{background:var(--white);color:var(--green)}
.account-note{font-size:13px;background:#edf3e5;border-radius:8px;padding:9px 12px}
.account-note.error{background:#f8e4df;color:var(--red)}
.account-note.muted{background:none;padding:0;color:var(--muted)}
.account-file{display:inline-block;font-weight:600;font-size:13px;margin-right:8px}
.account-dialog .text-button{border:0;background:none;color:var(--green);text-decoration:underline;padding:6px 0;font-weight:600}
.account-topbar{position:fixed;top:12px;left:50%;transform:translateX(-50%);z-index:1000;display:flex;gap:8px}
.account-topbar .account-open{margin:0;background:var(--paper,#fff);border:1px solid currentColor;border-radius:999px;padding:8px 16px;text-decoration:none;box-shadow:0 2px 8px rgb(0 0 0/.15);cursor:pointer}
body:has(#player-welcome:not([hidden])) .account-topbar{display:none}
.player-status-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.player-status-actions .account-open{margin:0;border:1px solid currentColor;border-radius:999px;padding:6px 14px;text-decoration:none;cursor:pointer;background:transparent}
.player-avatar{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#fff;font-size:22px;overflow:hidden;margin-right:8px;vertical-align:middle;box-shadow:0 1px 4px rgb(0 0 0/.15)}
.player-avatar img{width:100%;height:100%;object-fit:cover}
.avatar-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:6px;margin:8px 0}
.avatar-choice{font-size:24px;padding:6px;border-radius:10px;border:1px solid #ddd;background:#fff;cursor:pointer}
.avatar-choice:hover{border-color:currentColor}
#avatar-file{position:absolute;opacity:0;width:1px;height:1px}
/* Keep account/sign-out/admin buttons visible while scrolling */
.player-status-strip{position:sticky;top:8px;z-index:40;box-shadow:0 6px 18px #224d3314}
.hero-dialog{max-height:92vh;overflow:auto}
.party-open{margin-left:10px}
.party-dialog{width:min(560px,94vw)}
.party-dialog h3{margin:16px 0 8px;font-size:16px}
.party-list{display:grid;gap:6px;max-height:45vh;overflow:auto}
.party-row{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:var(--white)}
.party-row strong{flex:1;overflow-wrap:anywhere}
.party-avatar{width:34px;height:34px;display:grid;place-items:center;font-size:20px;border-radius:50%;background:#edf2e4;overflow:hidden;flex-shrink:0}
.party-avatar img{width:100%;height:100%;object-fit:cover}
.party-search{width:100%;padding:9px 12px;border:1px solid var(--line);border-radius:10px;margin-bottom:8px}
.party-tag{font-size:13px;font-weight:700;color:var(--green)}
.party-empty{color:var(--muted);font-size:14px}
.party-online{font-size:12px;color:var(--muted);white-space:nowrap}
.party-online.is-on{color:#2f8a3e;font-weight:700}
.party-strip{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:10px 0 14px;padding:10px 14px;border:1px solid #dce6d0;border-radius:12px;background:#edf2e4}
.party-chip{display:flex;align-items:center;gap:6px;padding:4px 10px 4px 4px;border-radius:999px;background:var(--white);border:1px solid var(--line);font-size:14px}
.party-chip .party-avatar{width:26px;height:26px;font-size:15px}
.party-chip.is-on{border-color:#2f8a3e}

/* Phone and touch layouts: preserve the static game and its controls. */
button,a{touch-action:manipulation}
dialog{max-height:calc(100dvh - 32px);overflow-y:auto;overscroll-behavior:contain}
@media(pointer:coarse){
 button:not([data-subject-picker]),.player-status-actions a,.entry-admin-link{min-height:44px}
 .stage-node .node-circle{width:44px;height:44px}
 .stage-path::before{top:22px}
}
@media(max-width:660px){
 body{min-width:0}
 main{min-width:0;padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right));padding-bottom:env(safe-area-inset-bottom)}
 .sidebar{max-width:100%;padding-top:max(14px,env(safe-area-inset-top))}
 .sidebar nav{max-width:100%;overscroll-behavior-x:contain;scroll-padding-inline:8px}
 .sidebar .nav-item,.sidebar .nav-item.active{flex-basis:78px;width:78px;min-height:76px;font-size:11px}
 .player-status-strip{top:0;padding:10px 12px;gap:8px;margin-top:14px;border-radius:8px}
 .player-status-strip>div:first-child{width:100%;gap:8px;flex-wrap:wrap}
 .player-status-strip [data-player-name]{width:auto;max-width:100%;display:flex;align-items:center;font-size:13px}
 .player-avatar{flex-shrink:0;width:28px;height:28px;margin-right:0}
 .player-status-strip .player-status-actions{display:flex;flex-wrap:wrap;flex-shrink:1;width:100%;gap:6px;justify-content:flex-start}
 .player-status-actions .account-open,.player-status-actions .install-trigger,.player-status-actions a{padding:8px 10px;min-height:44px;font-size:12px;line-height:1.3;white-space:normal;border-radius:8px;max-width:100%;margin:0}
 .player-level-label{font-size:12px;padding:4px 8px}
 .player-status-strip #player-rank-label{font-size:12px}
 input,select,textarea,.account-form input,.party-search,.subject-panel select,.install-dialog select{font-size:16px;min-height:44px}
 .entry-steps{gap:12px;flex-wrap:wrap}
 .entry-steps li{white-space:normal}
 .entry-content{padding:24px 20px}
 .entry-admin-link{display:inline-flex;align-items:center}
 h1,h2,h3,.realm-card p,.loot-card p,.hint-box,.realm-hint{overflow-wrap:anywhere;letter-spacing:0}
 .quest-toolbar,.quest-toolbar>div,.loot-toolbar,.battle-top,.quiz-footer{flex-wrap:wrap;gap:10px}
 .quest-toolbar>span{flex:1;min-width:100px}
 .quest-toolbar .text-button,.help-actions .text-button{min-height:44px;font-size:12px}
 .party-open{margin-left:0}
 .world-card{display:block;min-width:0}
 .world-card .world-art{height:140px;min-height:0}
 .world-icon{width:120px;height:120px}
 .world-card .world-info{padding:18px}
 .world-card .world-number{font-size:11px;left:14px;top:14px;letter-spacing:0}
 .world-card .world-state{left:auto;right:12px;top:12px;bottom:auto;font-size:11px}
 .world-card .world-info h2{font-size:20px}
 .world-card .world-info>p,.world-card .world-skills{font-size:12px}
 .stage-path{max-width:none;gap:8px}
 .stage-node{font-size:12px;min-height:62px}
 .stage-node .node-circle,.world-card.archive .stage-node .node-circle,.world-card.tower .stage-node .node-circle{width:44px;height:44px;font-size:14px}
 .stage-path::before{top:22px}
 .equation,.battle-card .equation{white-space:normal;overflow-wrap:anywhere;font-size:36px;letter-spacing:0;padding-inline:12px}
 .equation .times,.equation .equals{margin:0 4px}
 .battle-vitals{flex-wrap:wrap;padding:16px;gap:12px}
 .battle-vitals>div{min-width:0;max-width:100%}
 .heart-row{white-space:normal;overflow-wrap:anywhere;line-height:1.5}
 .enemy-health{flex:1;min-width:130px}
 .battle-card .answer-row,#answer-form .answer-row{flex-direction:column}
 .answer-row .primary{min-height:48px;font-size:14px}
 .help-actions{gap:8px 16px}
 .quiz-footer .keyboard-tip,.battle-card .quiz-footer>span:last-child{display:none}
 .belt-heading{flex-wrap:wrap}
 .tome-heading{flex-wrap:wrap}
 .tome-heading>div{flex:1;min-width:180px}
 .column-work{table-layout:fixed}
 .column-work th{overflow-wrap:anywhere;padding-right:8px}
 .column-work td{font-size:16px;white-space:normal;overflow-wrap:anywhere}
 .shop-grid{grid-template-columns:1fr}
 .activity-card{scroll-margin-top:180px}
 .character-preview{position:static}
 .account-dialog,.subject-dialog,.install-dialog{max-height:calc(100dvh - 24px);padding:24px 18px;width:calc(100% - 24px);overscroll-behavior:contain}
 .avatar-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
 .account-close,.subject-close,.install-close{min-width:44px;min-height:44px}
 .account-actions>button,.dialog-actions>button{flex:1;white-space:normal}
 .dialog-actions{flex-wrap:wrap}
 .party-row{flex-wrap:wrap;gap:8px}
 .party-row strong{min-width:80px;flex:1}
 .party-row button{font-size:13px;white-space:normal}
 .party-list{max-height:45dvh}
 .page-footer{align-items:flex-start;line-height:1.6;overflow-wrap:anywhere}
}
@media(max-width:360px){
 .subject-tabs{grid-template-columns:1fr}
 .ingredient-jars{grid-template-columns:1fr}
 .outfit-grid,.village-styles,.loot-grid{grid-template-columns:1fr}
 .equation,.battle-card .equation{font-size:30px}
}
@media(min-width:661px) and (max-width:950px){
 .workspace~.bottom-strip,.welcome{min-width:0}
 .welcome .math-art{margin-right:24px}
 .workspace{grid-template-columns:minmax(0,1fr)}
 .workspace>.settings-stack{grid-template-columns:repeat(2,minmax(0,1fr))}
 .workspace .equation{white-space:normal;overflow-wrap:anywhere;font-size:38px;letter-spacing:0}
 .player-status-strip{flex-wrap:wrap}
 .player-status-strip .player-status-actions{flex-wrap:wrap;flex-shrink:1}
}