header{gap:16px;flex-wrap:wrap;margin-bottom:24px}header a{color:#295b46}h1{font-size:clamp(25px,4vw,36px);margin:0 0 14px}.portals{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:28px}.portal{padding:28px 22px;background:#e5eee3;border:1px solid #d6e1d2;border-radius:16px;text-decoration:none;color:inherit;display:grid;gap:14px}.portal strong{font-size:22px}.portal span{line-height:1.7;color:#52645a}.lilac{background:#eee9f5;border-color:#dfd5eb}input{width:100%;padding:14px;border:1px solid #cbd7cb;border-radius:10px;font:inherit;background:#fff;color:inherit}#message{white-space:pre-wrap;line-height:1.7}#pictures{display:grid;gap:20px;margin-top:20px}.picture{margin:0;padding:14px;background:#fff;border:1px solid #ddd;border-radius:12px;overflow:hidden}.picture img,.picture video{display:block;width:100%;height:auto;max-width:580px;margin:auto}.picture figcaption{padding:12px 0;overflow-wrap:anywhere}.review-actions{display:flex;gap:8px;flex-wrap:wrap}.review-actions button{padding:12px;border:1px solid #cbc3d8;border-radius:8px;cursor:pointer}.review-actions input{flex-basis:100%}body[data-page=quotes]{background:radial-gradient(ellipse at top left,#eee6f5,transparent),#f8f6fa}body[data-page=quotes] .primary{background:#705084}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #a579cd;outline-offset:3px}@media(max-width:600px){.portals{grid-template-columns:1fr}.shell{padding:20px 14px}.workspace{padding:22px 16px}header .brand{font-size:18px}}
/* Shared account row: the action stays on one line on narrow phones. */
[hidden]{display:none!important}
.account{gap:16px}
#identity{min-width:0;overflow-wrap:anywhere}
.account-button{flex:0 0 auto;white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;padding:10px 16px;font:inherit;line-height:1.4;cursor:pointer}
#loginEntry{background:#295b46;color:#fff;border-color:#295b46}
#accountHint:empty,#message:empty{display:none}
#authorizationCode{display:block;max-width:100%;margin:10px 0;font-size:clamp(40px,11vw,64px);font-weight:750;line-height:1.2;letter-spacing:.12em;font-variant-numeric:tabular-nums;color:#295b46;user-select:all;overflow-wrap:anywhere}
#authorizationCopyHint:empty{display:none}
#authorizationCommand{overflow-wrap:anywhere}
.picture figcaption{padding:0 0 12px;font-weight:600}

/* All feature pages share the exact same header and content boundaries. */
.shell{width:100%;max-width:640px;margin-inline:auto;padding:20px 16px}
.shell>header,.shell>main,.workspace{width:100%;min-width:0}
.shell>header{margin:0 0 24px}
.workspace{padding:24px}
.account{flex-wrap:nowrap;justify-content:space-between}
body[data-page=home] .account,body[data-page=game] .account{flex-wrap:wrap}
.account-button{border-radius:10px;min-height:44px;min-width:max-content}
#name{overflow-wrap:anywhere}
@media(max-width:600px){.shell{padding:20px 14px}.workspace{padding:22px 16px}}

.home-button{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:8px 14px;border:1px solid #d5dfd3;border-radius:10px;background:#fff;text-decoration:none;white-space:nowrap;flex-shrink:0;font-size:14px}
#connectionStatus{color:#829085;font-size:13px;line-height:1.6}
.quota-footer{margin:18px 0 4px;color:#738077;font-size:12px;line-height:1.6}.quota-footer small{font-size:inherit}

body[data-page=game] #loginEntry{order:2}
.members-portal{background:#e4eef8;border-color:#d2e0ee;grid-column:1/-1}

@media (min-width: 900px) {
    .shell { max-width: 1160px; padding: 36px 40px 64px; }
    .shell>header { margin-bottom: 32px; }
    .workspace { padding: 36px 40px; }
    body[data-page="home"] .portals { gap: 20px; }
    body[data-page="home"] .portal { min-height: 165px; padding: 30px; }
    body[data-page="login"] .shell { max-width: 820px; }
    body[data-page="game"] .workspace { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; align-items: start; }
    body[data-page="game"] .workspace > h1, body[data-page="game"] .workspace > .muted, body[data-page="game"] .account, body[data-page="game"] .stats, body[data-page="game"] .binding-note { grid-column: 1 / -1; }
    body[data-page="game"] #form { grid-column: 1; }
    body[data-page="game"] .result-panel { grid-column: 2; min-width: 0; min-height: 320px; padding: 20px 24px; border: 1px solid #e9ede3; border-radius: 16px; background: #fbfcf9; }
    body[data-page="quotes"] #search { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(0, 2fr) auto; align-items: end; gap: 10px 16px; margin-top: 22px; }
    body[data-page="quotes"] #search > label { margin: 0; }
    body[data-page="quotes"] #search > label:first-child { grid-column: 1; grid-row: 1; }
    body[data-page="quotes"] #mode { grid-column: 1; grid-row: 2; }
    body[data-page="quotes"] #paramLabel { grid-column: 2; grid-row: 1; }
    body[data-page="quotes"] #query, body[data-page="quotes"] #uploadFile { grid-column: 2; grid-row: 2; min-width: 0; }
    body[data-page="quotes"] #search > .primary { grid-column: 3; grid-row: 2; width: auto; min-width: 136px; margin: 0; justify-content: center; white-space: nowrap; }
    body[data-page="quotes"] #uploadHint { grid-column: 1 / -1; margin: 0; }
    body[data-page="quotes"] #pictures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    body[data-page="quotes"] .picture { min-width: 0; }
}
.exhibition-portal{background:#f6eadc;border-color:#e7d7c2}
.merge-portal{background:#fff3bc;border-color:#ead36e}.merge-portal strong{color:#79570d}.merge-portal span{color:#75602b}
.sheep-portal{background:#ffe9d5;border-color:#eac6a7}.sheep-portal strong{color:#854c39}.sheep-portal span{color:#8c6a58}
.beasts-portal{background:#e7f0f5;border-color:#cbdde8}.beasts-portal strong{color:#244a64}.beasts-portal span{color:#547184}
.fortune-portal{background:#f4e8e2;border-color:#e7d1c6}.fortune-portal strong{color:#784c3e}.fortune-portal span{color:#80685e}
@media(min-width:601px){.members-portal{grid-column:auto}}
#ranking{margin-top:20px;overflow-x:auto}#ranking[hidden]{display:none}#ranking table{width:100%;border-collapse:collapse;background:#fff;border-radius:12px;overflow:hidden}#ranking th,#ranking td{padding:12px 14px;border-bottom:1px solid #e6e0ed;text-align:left}#ranking th{background:#eee9f5}
#quoteEditor{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:20px;padding:18px;border:1px solid #dfd5eb;border-radius:12px;background:#f7f3fb}#quoteEditor[hidden]{display:none}#quoteEditor label{display:grid;gap:6px}#quoteEditor input{min-width:0}#quoteEditor button,#quoteEditor p{grid-column:1/-1}#quoteEditor p{margin:0}
@media(max-width:600px){#quoteEditor{grid-template-columns:1fr}}