/* Arrival artwork fills the screen proportionally; the overlay keeps text readable. */
#game #class-screen {background:linear-gradient(180deg,#10221c99,#10221cdb 75%),url('/games/main/assets/branding/raja-castle-valley-background-v1.webp') center/cover;padding:24px;overflow:auto}
#game #class-screen .screen-content {height:auto;max-height:none;min-height:0;max-width:1120px;margin:auto}
#game #class-screen .raja-logo {width:164px;height:82px;filter:drop-shadow(0 5px 12px #091d18)}
#game #class-screen .eyebrow {display:block;color:#b8d4ac;font-size:9px;letter-spacing:2.5px;margin:4px 0 12px}
#game #class-screen h2 {font-size:clamp(23px,3vw,34px);color:#fff1cd;margin:0 0 8px}
#game #class-screen .arrival-story {font-size:13px;line-height:1.85;color:#d8e1c8;margin:0 0 20px}
#game #class-cards {display:grid;grid-template-columns:repeat(5,minmax(0,1fr));overflow:visible;gap:12px;margin:10px 0 18px;flex:none}
#game #class-screen .class-card {padding:8px;border:1px solid #a995646b;background:linear-gradient(145deg,#283e32ee,#15281ff5);border-radius:18px;box-shadow:0 10px 22px #0b1c2040;transition:transform .2s,border-color .2s;max-width:none;width:auto}
#game #class-screen .class-card:has([aria-pressed=true]) {border-color:#eed49a;transform:translateY(-5px);box-shadow:0 0 0 1px #eed49a66,0 8px 22px #050f1244}
#game #class-screen .class-choice {min-height:285px;gap:9px;padding:8px 5px;border:0;background:none;border-radius:12px}
#game #class-screen .class-preview-art {display:block;position:relative;width:150px;height:120px;max-width:100%}
#game #class-screen .class-choice canvas {position:absolute;left:0;top:-42.857143%;width:100%;height:142.857143%;max-width:100%;filter:drop-shadow(0 7px 6px #0e201b99);transition:transform .25s}
#game #class-screen [aria-pressed=true] canvas {transform:translateY(-3px)}
#game #class-screen .class-choice strong {font-size:20px}
#game #class-screen .class-choice span {font-size:11px;color:#f4e7c9}
#game #class-screen .class-fit {order:-1;font-size:10px;padding:3px 7px;color:#c9e2b9;border-radius:10px;background:#a6d39014;line-height:1.5}
#game #class-screen .class-playstyle {display:block;line-height:1.8;font-size:11px;color:#ccd6c5}
#game #class-screen details {border-top:1px solid #d5be841f;padding:8px 3px 3px;color:#b9c9aa;font-size:10px;line-height:1.6}
#game #class-screen summary {cursor:pointer;min-height:24px;text-align:center}
#game #class-screen .class-card ol {font-size:10px;display:block;min-height:0;padding:0 4px}
#game #class-screen .class-start {display:flex;align-items:center;justify-content:center;gap:20px;flex-wrap:wrap;margin:0}
#game #class-screen .language-choice {margin:0;width:150px;font-size:11px}
#game #class-screen .language-choice select {min-height:40px}
#game #begin-btn {margin:0;max-width:360px;min-height:48px;border-radius:12px;background:linear-gradient(#ead39a,#cba963);color:#273528;font-weight:700;box-shadow:inset 0 1px #fff5cf88,0 5px 15px #0b181a44}
#game #begin-btn:disabled {opacity:.5}
#game #class-rotation-hint {font-size:10px;margin:14px 0 0;color:#afc0aa}
#resume-adventure {display:flex;gap:14px;align-items:center;justify-content:center;margin:0 auto 18px;padding:12px 16px;border:1px solid #b8d29466;border-radius:14px;background:#274032f5;max-width:680px;text-align:left;font-size:12px}
#resume-adventure label {display:flex;flex-direction:column;gap:6px;color:#dfebcd;flex:1}
#resume-adventure select {width:100%;font:inherit;color:#ffe8ac;background:#21372a;border:1px solid #7c9166;border-radius:6px;padding:7px;min-height:36px}
#resume-btn {padding:10px 18px;min-height:44px;border-radius:9px;white-space:nowrap;border-color:#bcd999;color:#e1f8c6;background:#416244}
.first-journey {position:absolute;top:130px;right:285px;z-index:var(--z-widget);width:274px;border:1px solid #c9b27a88;border-radius:16px;background:linear-gradient(145deg,#294337f5,#1b3028f5);box-shadow:0 8px 28px #0d201c44;color:#f6edce;padding:14px}
.first-journey-heading {display:flex;align-items:center;gap:7px;color:#d1ddb8;font-size:11px}
.journey-spark {color:#f3d28a;font-size:20px}
.journey-toggle {margin-left:auto;border:1px solid #99b58a55;background:#1f3629;border-radius:8px;min-width:32px;min-height:32px;color:#e8e3c7;font-size:18px}
.first-journey h2 {font-size:17px;font-weight:600;line-height:1.6;margin:10px 0 4px;color:#fff0bd}
.first-journey p {font-size:12px;line-height:1.8;margin:6px 0;color:#dbe4ce}
.first-journey .journey-hint {font-size:11px;color:#afc6aa;padding:8px 0;border-top:1px solid #c6d9a320}
.journey-progress {display:flex;gap:7px;margin:10px 0}
.journey-progress span {flex:1;text-align:center;line-height:22px;background:#112b2488;border-radius:8px;color:#759886;font-size:10px}
.journey-progress .done {background:#66865355;color:#cee9ad}
.journey-progress .current {background:#e4c485;color:#23382a;box-shadow:0 0 10px #e4c48522}
.journey-action {width:100%;min-height:42px;border:1px solid #dbc28a;border-radius:9px;background:linear-gradient(#e8d5a1,#c5ab74);color:#283b2b;font-size:12px;font-weight:600;padding:8px}
.journey-action:disabled {opacity:.5}
.journey-mastery {font-size:11px;line-height:1.8;margin-top:12px;color:#c8dbc0}
.journey-mastery summary {cursor:pointer}
.journey-mastery ul {padding-left:15px}.journey-mastery .done {color:#f2d08a}
.journey-save {display:block;font-size:9px;line-height:1.6;color:#9eb699;margin-top:10px}
.journey-save[data-state=unavailable],.journey-save[data-state=invalid],.journey-save[data-state=changed] {color:#f0c695}
.first-journey.is-collapsed {padding:6px 10px;top:84px;width:252px}
.first-journey.is-collapsed .journey-save {margin:0;font-size:8px}
#game.journey-guided #automation-panel {display:none}
.journey-beacon {position:absolute;z-index:var(--z-status);pointer-events:none;transform:translate(-50%,-50%);color:#ffe6a2;text-shadow:0 0 10px #f8d07b,0 2px 4px #112c22;font-size:40px;animation:journey-bob 2s ease-in-out infinite}
.journey-context {position:absolute;bottom:140px;left:50%;transform:translateX(-50%);max-width:min(520px,90%);z-index:var(--z-notice);border:1px solid #c9be8499;border-radius:12px;padding:10px 16px;background:#183b31ed;color:#f7ecc7;font-size:12px;line-height:1.7;text-align:center;pointer-events:none}
.journey-toast {position:absolute;left:50%;top:145px;transform:translateX(-50%);z-index:var(--z-notice);max-width:70%;padding:10px 20px;border:1px solid #e6d18c99;border-radius:24px;background:#35583beb;color:#fff0bc;font-size:13px;text-align:center;pointer-events:none;animation:journey-appear .35s ease-out}
#game #dodge-btn {position:absolute;right:128px;bottom:145px;z-index:var(--z-control);width:58px;height:58px;padding:4px;border:2px solid #acd2be;border-radius:50%;background:radial-gradient(circle at 35% 25%,#42685a,#15382f);color:#dbf3df;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 3px 10px #10241c77;touch-action:manipulation}
#dodge-btn>span {font-size:23px;line-height:22px}#dodge-btn small {font-size:10px}#dodge-btn kbd {font-size:7px;color:#bad1c4}#dodge-btn:disabled {opacity:.45}
.first-journey.celebrate {animation:journey-glow .65s ease-out}
@keyframes journey-bob {50% {transform:translate(-50%,calc(-50% - 6px));opacity:.75}}
@keyframes journey-appear {from {opacity:0;margin-top:8px}to {opacity:1;margin-top:0}}
@keyframes journey-glow {50% {box-shadow:0 0 22px #efda8a55}}
@media(max-width:1000px) and (min-width:751px) {#game #class-cards {gap:6px}#game #class-screen .class-choice {padding:4px;min-height:290px}.first-journey {right:200px;width:252px}}
@media(max-width:750px),(pointer:coarse) and (max-width:1100px) {
  #game #class-screen {padding:16px 12px calc(var(--safe-bottom,0px) + 150px);align-items:flex-start;scroll-padding-bottom:150px}
  #game #class-screen .screen-content {display:flex;height:auto}
  #game #class-screen .raja-logo {width:124px;height:62px}
  #game #class-screen .arrival-story {font-size:11px;display:block;margin-bottom:10px}
  #game #class-screen .eyebrow {font-size:7px;letter-spacing:1.6px}
  #game #class-cards {display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;padding:7px 10px 12px;margin:2px -2px 10px;max-width:100%;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#d2b675 #20392c}
  #game #class-screen .class-card {flex:0 0 228px;scroll-snap-align:center;min-width:0;padding:7px}
  #game #class-screen .class-choice {min-height:255px;gap:6px}
  #game #class-screen .class-preview-art {height:106px}
  #game #class-screen .class-choice small {display:block}
  #game #class-screen .class-start {gap:10px}
  #game #class-screen .language-choice {width:130px}
  #game #begin-btn {max-width:100%;font-size:12px}
  #game #class-rotation-hint {display:block;font-size:9px;margin-top:10px}
  #resume-adventure {padding:9px;gap:8px;width:100%;font-size:10px;margin-bottom:10px}#resume-btn {font-size:11px;padding:8px}
  .first-journey {top:calc(var(--safe-top,0px) + 165px);right:10px;width:min(228px,calc(100vw - 152px));padding:10px;border-radius:12px;max-height:calc(100dvh - 410px);overflow:auto}
  .first-journey-heading {font-size:9px;gap:3px}.journey-spark {font-size:14px}.journey-toggle {min-width:28px;min-height:28px}
  .first-journey h2 {font-size:13px;margin:5px 0}.first-journey p {font-size:10px;line-height:1.65}.first-journey .journey-hint {font-size:9px;padding:5px 0}
  .journey-body>p:not(.journey-hint) {display:none}
  .journey-progress {gap:4px;margin:6px 0}.journey-progress span {line-height:18px;font-size:8px}
  .journey-action {min-height:40px;font-size:10px}.journey-save {font-size:8px;margin-top:5px}
  .first-journey.is-collapsed {top:calc(var(--safe-top,0px) + 166px);width:min(220px,calc(100vw - 152px));padding:4px 8px;max-height:none}
  #game:not(.journey-guided) #automation-panel {top:calc(var(--safe-top,0px) + 235px)}
  .journey-context {bottom:calc(var(--safe-bottom,0px) + 257px);font-size:10px;padding:7px 10px;max-width:88%;width:max-content}
  .journey-toast {top:calc(var(--safe-top,0px) + 126px);font-size:10px;padding:7px 13px;max-width:72%}
  #game #dodge-btn {right:calc(var(--safe-right,0px) + var(--mobile-edge,16px) + 7px);bottom:calc(var(--safe-bottom,0px) + 126px);width:52px;height:52px}
  #dodge-btn kbd {display:none}
}
@media(max-height:550px) and (orientation:landscape) {
  #game #class-screen {padding:10px 18px}#game #class-screen .raja-logo {display:none}#game #class-screen .eyebrow {display:none}
  #game #class-screen h2 {font-size:22px}#game #class-screen .arrival-story {font-size:10px;margin:4px}
  #game #class-screen .class-choice {min-height:210px}#game #class-screen .class-preview-art {height:70px}
  .first-journey {top:65px;right:155px;width:230px;max-height:calc(100dvh - 175px)}.first-journey.is-collapsed {top:65px;right:155px;width:230px}
  #game:not(.journey-guided) #automation-panel {top:132px;right:155px}
  .journey-context {bottom:14px;max-width:36%;font-size:9px}.journey-toast {top:55px;font-size:10px}
}
@media(prefers-reduced-motion:reduce) {.journey-beacon,.journey-toast,.first-journey.celebrate {animation:none}#game #class-screen .class-card,#game #class-screen .class-choice canvas {transition:none}}
.force-reduce-motion .journey-beacon,.force-reduce-motion .journey-toast,.force-reduce-motion .first-journey.celebrate {animation:none}
.force-reduce-motion #game #class-screen .class-card,.force-reduce-motion #game #class-screen .class-choice canvas {transition:none}

#game #class-screen #simulator-entry {display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 16px;border:1px solid #a6c99488;border-radius:9px;background:#203a2e;color:#d9ebc8;text-decoration:none;font-size:12px;font-weight:600;touch-action:manipulation}
#game #class-screen #simulator-entry:hover {background:#304c39;border-color:#c7e2a5}
#game #class-screen #simulator-entry:focus-visible {outline:2px solid #eed49a;outline-offset:3px}
@media(max-width:750px),(pointer:coarse) and (max-width:1100px) {#game #class-screen #begin-btn {order:-1}#game #class-screen .language-choice select {width:80px;min-width:0}#game #class-screen #simulator-entry {font-size:11px;padding:10px 12px}}

/* Shared language control for character selection and naming. */
#game #arrival-language {display:none;position:fixed;top:calc(12px + env(safe-area-inset-top));right:calc(16px + env(safe-area-inset-right));z-index:calc(var(--z-screen) + 1)}
#game:has(#class-screen:not([hidden])) #arrival-language {display:block}
#game #arrival-language .language-choice {display:flex;align-items:center;gap:8px;margin:0;padding:0 10px;border:1px solid #a995646b;border-radius:10px;background:#15281ff5;color:#f4e7c9}
#game #arrival-language strong {position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
#game #arrival-language select {width:auto;min-width:90px;min-height:44px;padding:6px 4px;margin:0;border:0;background:transparent;color:#f4e7c9;font:inherit;font-size:14px;cursor:pointer}
#game #arrival-language select:focus-visible {outline:2px solid #eed49a;outline-offset:2px;border-radius:6px}
#game #arrival-language option {background:#15281f;color:#f4e7c9}
@media(max-width:750px),(max-height:700px) {
  #game #class-screen {padding-top:calc(64px + env(safe-area-inset-top))}
  #game #arrival-language {right:calc(12px + env(safe-area-inset-right))}
}

#game #class-screen .class-card.preview-casting {border-color:#e6cf94;box-shadow:0 0 0 1px #eed49a33,0 8px 28px #e8c87a22}

/* Saved adventures: four character slots, with creation on a separate view. */
#game #resume-adventure {display:block;max-width:980px;width:100%;padding:0;border:0;background:none;margin:22px auto 0;text-align:left}
#game #class-screen [hidden] {display:none!important}
.character-roster-heading {display:flex;align-items:center;justify-content:space-between;margin:0 0 14px;color:#fff0cd;font-size:17px;font-weight:600}
.character-slot-count {font-size:12px;color:#d5dfc4;border:1px solid #bba77355;border-radius:20px;padding:5px 12px;background:#1c3429bb}
.character-roster-grid {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.saved-character-card {position:relative;overflow:hidden;border:1px solid #a9956477;border-radius:18px;background:linear-gradient(145deg,#2b4439f5,#13291ff5);box-shadow:0 12px 25px #061c2544;transition:border-color .2s,transform .2s}
.saved-character-card:has([aria-pressed=true]) {border-color:#eed49a;box-shadow:0 0 0 1px #eed49a55,0 12px 30px #081e2544;transform:translateY(-3px)}
#game .saved-character-choice {display:flex;align-items:center;flex-direction:column;width:100%;padding:16px 14px 12px;gap:7px;background:none;border:0;color:#f4e7c9;border-radius:16px;min-height:272px}
.character-card-top {display:flex;justify-content:space-between;align-items:center;width:100%;font-size:10px;color:#b6cbb2;letter-spacing:1px}
.character-selected-mark {visibility:hidden;color:#26372a;background:#eed49a;border-radius:50%;width:20px;height:20px;line-height:20px;text-align:center;letter-spacing:0}
[aria-pressed=true] .character-selected-mark {visibility:visible}
.saved-character-art {position:relative;display:block;width:150px;height:130px;max-width:100%;background:radial-gradient(ellipse at 50% 85%,#d0bc7425,transparent 64%)}
.saved-character-art canvas {position:absolute;top:-42px;left:0;width:150px;height:200px;filter:drop-shadow(0 8px 6px #00150e88)}
.saved-character-choice strong {font-size:20px;color:#f4d48b;max-width:100%;overflow-wrap:anywhere}
.saved-character-class {font-size:12px;color:#e5ebd7}
.saved-character-map {font-size:11px;color:#adbfaa;max-width:100%;overflow-wrap:anywhere}
#game .character-delete {display:block;margin:0 auto 10px;min-height:36px;border:0;background:none;color:#d1aaa0;font-size:11px;border-radius:7px;padding:6px 14px}
#game .character-delete:hover {color:#ffd5ca;background:#9d41332e}
#game .character-empty {display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px;min-height:318px;border:1px dashed #b5b98c77;border-radius:18px;background:#152e248c;color:#c6d4bc;padding:16px;transition:background .2s,border-color .2s}
#game .character-empty:hover {background:#294336df;border-color:#eed49a}
.character-empty-plus {font-size:32px;font-weight:300;border:1px solid #9db38b66;border-radius:50%;width:58px;height:58px;line-height:52px;color:#ead39b}
.character-empty strong {font-size:14px}.character-empty>span:last-child {font-size:10px;text-align:center}
.character-roster-footer {display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:22px;text-align:center}
.character-roster-footer p {font-size:12px;color:#c4d0b8;margin:0}
#game #resume-btn {width:min(100%,360px);min-height:48px;background:linear-gradient(#ead39a,#cba963);border:1px solid #e5cd94;color:#253a2c;font-weight:700;border-radius:12px;font-size:15px}
.character-save-status {text-align:center;color:#d1e6bb;font-size:12px}
#game .character-back {background:none;border:0;color:#d9e0c4;min-height:44px;font-size:12px}
#game .class-choice:disabled {opacity:.4;cursor:not-allowed}
.character-delete-dialog {width:min(420px,calc(100vw - 32px));box-sizing:border-box;padding:28px;border:1px solid #b69b65;border-radius:20px;background:linear-gradient(145deg,#294034,#15291f);color:#f4e7c9;box-shadow:0 24px 90px #0009;text-align:center}
.character-delete-dialog::backdrop {background:#061712bb;backdrop-filter:blur(6px)}
.character-delete-symbol {display:block;font-size:36px;color:#e4b598}
.character-delete-dialog h2 {font-size:22px;color:#fff0d2;margin:10px 0}
.character-delete-dialog p {font-size:13px;line-height:1.85;overflow-wrap:anywhere;color:#cdd8c4}
.character-delete-actions {display:flex;gap:10px;margin-top:22px}.character-delete-actions button {flex:1;min-height:46px;border-radius:10px;background:#304938;border:1px solid #8ea27a;color:#e6edda;font:inherit;font-size:13px}
.character-delete-actions .character-delete-confirm {background:#914b3d;border-color:#c88770;color:#fff0e7}
.character-delete-dialog .character-delete-error {color:#ffb7a0}
.saved-character-choice:focus-visible,.character-empty:focus-visible,.character-delete:focus-visible,.character-delete-actions button:focus-visible {outline:2px solid #eed49a;outline-offset:3px}
@media(max-width:750px) {.character-roster-grid {grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.character-roster-heading {font-size:15px}#game .saved-character-choice {padding:12px 8px;min-height:248px}#game .character-empty {min-height:294px}.saved-character-choice strong {font-size:17px}.character-delete-dialog {padding:22px}.character-roster-footer {margin-top:16px}}
@media(prefers-reduced-motion:reduce) {.saved-character-card {transition:none}}