body::before { background: radial-gradient(ellipse at top, #183449 0%, #0c1523 68%); }
/* One beginner handbook, shared by the opening and in-game help dialog. */
#game-help-dialog[data-game="damas"] { width:min(820px,calc(100vw - 20px));max-width:820px;max-height:calc(100dvh - 24px);padding:24px;text-align:left; }
#game-help-dialog[data-game="damas"] > h2 { color:#f6db9e; }
.damas-handbook { color:#c8d5df;text-align:left;font-size:.9rem;line-height:1.7; }
.damas-help-intro { color:#f8e5bd;font-size:1.05rem;font-weight:700; }
.damas-lesson { margin:12px 0;border:1px solid #8ca4b442;border-radius:13px;background:#132539;overflow:hidden; }
.damas-lesson > summary { box-sizing:border-box;min-height:44px;padding:15px 16px;color:#f2dca9;font-weight:700;cursor:pointer; }
.damas-lesson > summary:focus-visible { outline:2px solid #ffe399;outline-offset:-4px;border-radius:10px; }
.damas-lesson[open] > summary { border-bottom:1px solid #8ca4b42b;background:#243b50; }
.damas-lesson-content { padding:4px 17px 14px; }
.damas-lesson-content h4 { margin:18px 0 6px;color:#f1dcaa; }
.damas-lesson-content p { margin:12px 0; }
.damas-lesson-content li { margin:9px 0; }
.damas-piece-lessons { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:12px; }
.damas-piece-lesson { min-width:0;padding:14px;border:1px solid #92acbd38;border-radius:12px;background:linear-gradient(130deg,#22394a,#132336); }
.damas-piece-lesson header { display:flex;min-height:76px;flex-direction:column;justify-content:center;gap:7px; }
.damas-piece-lesson h4 { margin:0;font-size:1.06rem; }
.damas-piece-lesson strong { display:block;color:#b8d0df;font-size:.8rem;line-height:1.5;font-weight:500; }
.damas-lesson-board { display:block;box-sizing:border-box;width:min(100%,190px);height:auto;margin:12px auto;border:5px solid #71573e;border-radius:5px;box-shadow:0 8px 20px #0004; }
.damas-piece-lesson p { font-size:.83rem;line-height:1.7; }
.damas-diagram-key { color:#aabfd0;font-size:.8rem; }
@media(max-width:500px) {
  #game-help-dialog[data-game="damas"] { padding:18px 12px; }
  .damas-handbook { font-size:.86rem; }
  .damas-lesson > summary { padding:14px 12px; }
  .damas-lesson-content { padding:2px 10px 12px; }
  .damas-lesson-content ul,.damas-lesson-content ol { padding-left:23px; }
  .damas-piece-lessons { grid-template-columns:1fr; }
  .damas-piece-lesson header { min-height:60px; }
  .damas-piece-lesson .damas-lesson-board { width:160px; }
  .damas-piece-lesson p { font-size:.86rem; }
}
#screen-title.screen .title-logo { width: min(100%, 380px); max-height: none; aspect-ratio: 40 / 21; }
@media (min-width: 760px) { #screen-title.screen .title-logo { width: 100%; max-width: 480px; } }
.damas-eyebrow { color: #b6c7d9; font-size: .7rem; letter-spacing: .25em; text-transform: uppercase; margin: 0; }
.damas-intro { margin: 0; color: #b7c6d5; font-size: .88rem; max-width: 310px; }
.damas-settings { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;padding:7px;box-sizing:border-box;width:min(100%,340px);border:1px solid #b69b5d50;border-radius:13px;background:linear-gradient(135deg,#223344,#152334);text-align:left; }
.damas-settings .damas-compact-setting { position:relative;display:flex;align-items:center;justify-content:center;gap:5px;min-width:0;min-height:46px;padding:0 5px;border:1px solid #7b919c80;border-radius:8px;background:#0e1c2b;color:#fff0cd;cursor:pointer; }
.damas-compact-setting > svg { width:18px;height:20px;flex:none;color:#e9ce92; }
.damas-compact-setting > strong { min-width:0;text-align:center;font:600 .7rem/1.15 system-ui; }
.damas-settings select { position:absolute;inset:0;box-sizing:border-box;width:100%;height:100%;min-height:44px;opacity:0;cursor:pointer; }
.damas-compact-setting:has(select:focus-visible) { outline:2px solid #ffe1a0;outline-offset:2px; }
@media(hover:none) and (pointer:coarse){ .damas-compact-setting:has(select:focus-visible) { outline:none; } }
.damas-development { max-width: 300px; margin: 0; color: #a9bbce; font-size: .73rem; line-height: 1.5; }
#gamepad-status { font-size: .7rem; margin: 0; }
#screen-play { --damas-chrome-height: 250px; --damas-toolbar-space: var(--game-footer-space, calc(82px + env(safe-area-inset-bottom, 0px))); max-width: 500px; width: 100%; min-height: 100dvh; justify-content: center; padding: max(8px, env(safe-area-inset-top)) 10px var(--damas-toolbar-space); }
#game-frame { display: flex; flex-direction: column; width: 100%; height: auto; min-height: 0; overflow: visible; background: transparent; touch-action: manipulation; }
.damas-sidebar { display:contents; }
#game { order: 2; height: auto; width: min(100%, max(180px, calc(100dvh - var(--damas-chrome-height) - var(--damas-toolbar-space) - max(8px, env(safe-area-inset-top))))); min-width: 0; aspect-ratio: 1; align-self: center; border: 1px solid #e5c98699; border-radius: 10px; box-shadow: 0 0 0 3px #0b1c2d,0 0 0 4px #b18a4770,0 18px 45px #0007; outline-offset: 6px; touch-action: none; }
#game.is-dragging { cursor: grabbing !important; }
.damas-top { order: 0; display: flex; justify-content: space-between; align-items: center; padding: 0 4px 8px; text-align: left; }
.damas-top strong { display: block; font-size: 1rem; color: #ffdf8a; }
.damas-mode { color: #9aafc5; font-size: .67rem; letter-spacing: .12em; text-transform: uppercase; }
.damas-pill { padding: 6px 10px; border-radius: 30px; border: 1px solid #60919255; color: #94dbcf; font-size: .7rem; }
@media (max-width: 420px) { .damas-top > .damas-pill { display: none; } }
#screen-result { position: relative; overflow: hidden; }
.damas-player { display: flex; align-items: center; gap: 10px; padding: 10px 5px; text-align: left; }
.damas-player.top { order: 1; }
.damas-player.bottom { order: 3; }
.damas-player .token { position:relative;width:28px;height:28px;flex:0 0 auto;border-radius:50%;border:2px solid #ebc877;background:radial-gradient(ellipse at 33% 24%,#fff4c7,#dfb04e 45%,#a9671c 80%);box-shadow:inset 0 1px 1px #fff6,0 3px 0 #714717,0 4px 6px #0006; }
.damas-player .token::before { content:'';position:absolute;inset:4px;border:1px solid #9c6b2d99;border-radius:50%;box-shadow:0 1px 0 #ffefb888; }
.damas-player .token.dark { border-color:#8eb6c9;background:radial-gradient(ellipse at 33% 24%,#3b799a,#153656 48%,#091b33 85%);box-shadow:inset 0 1px 1px #bfeaff66,0 3px 0 #06162a,0 4px 6px #0006; }
.damas-player .token.dark::before { border-color:#8dc9dd66;box-shadow:0 1px 0 #020e21; }
.damas-player strong { display: block; font-size: .8rem; }
.damas-player small { color: #9eb0c4; font-size: .68rem; }
.damas-player .count { margin-left: auto; color: #c3d2df; font-size: .75rem; }
.damas-status { order: 4; margin: 0; min-height: 31px; color: #f5d58c; font-size: .78rem; padding: 5px; }
.damas-actions { order: 5; display: flex; gap: 8px; }
.damas-actions button { flex: 1; min-height: 44px; border: 1px solid #7492ad55; border-radius: 10px; background: #1b2c41; color: #d9e4ef; font: 600 .76rem system-ui; cursor: pointer; }
.damas-actions button:disabled { opacity: .4; cursor: default; }
.damas-moves { order: 6; color: #8da4bb; font-size: .68rem; min-height: 22px; padding-top: 7px; }
/* Preserve the shared pause/music/mute/share toolbar and its focus handling. */
#screen-play .game-controls { position: fixed; }
.damas-result-title { color: #ffdf8a; font-size: 2rem; margin: 0; }
.damas-result-details { color: #becddb; font-size: .9rem; }
.damas-confirm { border: 1px solid #bb9456; border-radius: 18px; padding: 24px; background: #152438; color: #ecf2f8; max-width: min(340px, calc(100vw - 30px)); box-shadow: 0 25px 80px #0008; text-align: center; }
.damas-confirm::backdrop { background: #050b15b8; }
.damas-confirm h2 { margin-top: 0; }
.damas-confirm button { min-height: 44px; margin: 5px; }
@media (max-height: 680px) { .damas-player { padding: 6px 5px; } .damas-top { padding-bottom: 6px; } #screen-title.screen { gap: 10px; } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; } }
.damas-online-link { text-align: center; text-decoration: none; }
.damas-online-link[hidden], .damas-history-button[hidden] { display: none; }
.damas-history-button { background: transparent; border: 0; padding: 8px; color: #b8cedc; cursor: pointer; text-decoration: underline; }
.damas-history { white-space: pre-line; max-height: 160px; overflow-y: auto; font-size: .75rem; color: #c1d5e3; }
#screen-title .game-follow-x { margin-top:4px; }
.damas-clock { margin-left: auto; flex-shrink: 0; padding: 7px 9px; border: 1px solid #688ca466; border-radius: 8px; font: 700 1rem ui-monospace, monospace; color: #cfdeec; font-variant-numeric: tabular-nums; }
.damas-clock.active { background: #ffe2a1; color: #253244; border-color: #ffe2a1; }
.damas-clock.urgent { color: #ff908e; }
.damas-clock.active.urgent { background: #9b3030; color: white; border-color: #fb8989; }
.damas-online-controls { order: 7; padding-top: 5px; }
.damas-online-controls[hidden], #damas-draw-answer[hidden], .damas-clock[hidden] { display: none; }
.damas-online-controls p { margin: 5px 0; font-size: .7rem; color: #b1c4d8; }
.damas-online-controls .damas-actions a { display: grid; place-items: center; padding: 0 16px; color: #f5d58c; min-height: 44px; }
.damas-player:has(.damas-clock:not([hidden])) .count { margin-left: 0; font-size: .65rem; max-width: 74px; }
#screen-play:has(#damas-online-controls:not([hidden])) { --damas-chrome-height: 354px; }
#screen-play:has(#damas-online-controls:not([hidden])):has(#damas-draw-status:not(:empty)) { --damas-chrome-height: 374px; }
#screen-play:has(#damas-online-controls:not([hidden])):has(#damas-draw-answer:not([hidden])) { --damas-chrome-height: 430px; }
body:has(#damas-online-controls:not([hidden])) .pause-note { color: #f5d58c; }

@media(min-width:860px) and (hover:hover) and (pointer:fine){
  #screen-play { box-sizing:border-box;max-width:none;--damas-board-height:calc(100dvh - var(--damas-toolbar-space) - 24px);--damas-panel:clamp(230px,24vw,290px);--damas-gap:clamp(16px,2vw,28px); }
  #game-frame { display:grid;grid-template-columns:minmax(0,1fr) var(--damas-panel);gap:var(--damas-gap);align-items:start;max-width:calc(var(--damas-board-height) + var(--damas-panel) + var(--damas-gap));margin-inline:auto; }
  #game { grid-column:1;grid-row:1;width:100%;box-sizing:border-box;align-self:start; }
  .damas-sidebar { display:flex;flex-direction:column;gap:14px;grid-column:2;grid-row:1;max-height:var(--damas-board-height);overflow:auto;box-sizing:border-box;padding:14px;border:1px solid #93a6b53d;border-radius:15px;background:linear-gradient(145deg,#223446cc,#101d2bd9); }
  .damas-sidebar > * { flex-shrink:0; }
  .damas-sidebar .damas-top { flex-wrap:wrap;gap:8px;padding:0; }
  .damas-sidebar .damas-player { display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:6px 10px;min-width:0;padding:3px 0; }
  .damas-sidebar .damas-player .token { grid-column:1;grid-row:1; }
  .damas-sidebar .damas-player > div { grid-column:2;grid-row:1;min-width:0;overflow-wrap:anywhere; }
  .damas-sidebar .damas-clock { grid-column:3;grid-row:1;margin-left:0; }
  .damas-sidebar .damas-player .count,.damas-sidebar .damas-player:has(.damas-clock:not([hidden])) .count { grid-column:2/-1;grid-row:2;max-width:none;margin-left:0; }
  .damas-sidebar .damas-actions { flex-direction:column; }
  .damas-sidebar .damas-status { min-height:0;padding:0;text-align:left; }
  .damas-sidebar .damas-moves { padding:0;text-align:left; }
}

/* Progress is outside the running board. Static, lightweight vector medals. */
.damas-title-progress,.damas-result-progress { width:min(100%,380px); }
.damas-performance { box-sizing:border-box;width:100%;padding:12px;border:1px solid #bca66a55;border-radius:16px;background:linear-gradient(135deg,#1a3448,#101f32);text-align:left;box-shadow:0 6px 20px #0002; }
.damas-performance-head { display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:9px; }
.damas-performance-head strong { display:block;color:#f2e6c5;font-size:.83rem; }
.damas-performance-head small { display:block;margin-top:2px;color:#a3bccf;font-size:.65rem; }
.damas-points-open { display:flex;align-items:center;gap:4px;min-height:44px;padding:4px 9px;border:1px solid #d9b55c88;border-radius:10px;background:linear-gradient(135deg,#33424b,#283744);color:#ffe29b;font:700 .73rem system-ui;cursor:pointer; }
.damas-points-open img { flex:none; }
.damas-points-open:hover { background:#3c4b52;border-color:#ffe29b; }
.damas-points-open:focus-visible,.damas-medal-card:focus-visible { outline:2px solid #ffe29b;outline-offset:3px; }
.damas-achievements { box-sizing:border-box;width:min(680px,calc(100vw - 24px));max-height:calc(100dvh - 32px);padding:18px;border:1px solid #b69a5d80;border-radius:22px;background:linear-gradient(140deg,#19344a,#0d1c30 65%);color:#e9f2fc;box-shadow:0 28px 100px #000a;overflow-y:auto; }
.damas-achievements::backdrop { background:#040b1bd9; }
.damas-achievements [hidden] { display:none!important; }
.damas-achievements-head { display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px; }
.damas-achievements-eyebrow { color:#e8c77d;font-size:.6rem;font-weight:800;letter-spacing:.16em; }
.damas-achievements h2 { margin:3px 0 0;font-size:1.15rem;line-height:1.25; }
.damas-achievements-close { flex:none;width:44px;height:44px;border:1px solid #83a4bb66;border-radius:50%;background:#203b51;color:#dcecff;font:400 28px system-ui;cursor:pointer; }
.damas-point-grid { width:100%;border:1px solid #7198ad55;border-radius:12px;border-spacing:0;background:#142c40;overflow:hidden;table-layout:fixed; }
.damas-point-grid th,.damas-point-grid td { padding:6px 10px;text-align:center; }
.damas-point-grid thead th { color:#b8cbdc;background:#102538;font-size:.68rem;font-weight:500; }
.damas-point-grid th:first-child { text-align:left;width:22%; }
.damas-point-grid tbody th { font-size:.78rem;color:#ffe29b;font-weight:700; }
.damas-point-grid tbody tr+tr>* { border-top:1px solid #7198ad26; }
.damas-point-grid strong { color:#f1f6ff;font-size:1.05rem;font-variant-numeric:tabular-nums; }
.damas-collection-note { color:#a6bfd1;font-size:.72rem;line-height:1.45;margin:8px 0; }
.damas-medal-filters { display:flex;align-items:center;gap:8px;margin:10px 0 12px; }
.damas-medal-tabs { display:flex;flex:1;min-width:0;gap:4px;padding:3px;background:#091a2c;border-radius:10px; }
.damas-medal-tabs button { flex:1;min-height:40px;border:0;border-radius:8px;background:transparent;color:#a5bfd3;font:700 .8rem system-ui;cursor:pointer; }
.damas-medal-tabs button[aria-pressed="true"] { color:#182d3b;background:linear-gradient(135deg,#fff0b0,#e0b85b);box-shadow:0 2px 10px #0003; }
.damas-week-select { display:block;flex:0 1 170px;min-width:0;font-size:.76rem;color:#aec5d8; }
.damas-week-caption { position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap; }
.damas-week-select select { width:100%;min-height:44px;box-sizing:border-box;border:1px solid #64849d;border-radius:9px;background:#12283e;color:#f0f6ff;padding:6px 8px;font:inherit; }
.damas-medal-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px; }
.damas-medal-card { display:flex;flex-direction:column;align-items:center;justify-content:flex-start;min-width:0;gap:2px;padding:6px 4px;border:1px solid #ceb57766;border-radius:12px;background:radial-gradient(circle at 50% 35%,#28526a,#132b41 70%);color:#f3e7c5;font:inherit;cursor:pointer; }
.damas-medal-card.is-earned:hover { border-color:#ffe2a3;background:radial-gradient(circle at 50% 35%,#316579,#17374b 70%); }
.damas-medal-art { position:relative;display:block;width:min(100%,160px);aspect-ratio:1; }
.damas-medal-card .damas-medal-art { width:min(100%,clamp(60px,calc((100dvh - 420px) / 3),108px)); }
.damas-medal-card .damas-medal-initial { font-size:1.2rem; }
.damas-medal-frame { width:100%;height:100%;display:block; }
.damas-medal-face,.damas-medal-initial { position:absolute;left:28.3%;top:20.1%;width:43.4%;height:43.4%;border-radius:50%;object-fit:cover; }
.damas-medal-initial { display:grid;place-items:center;background:#17425e;color:#fff0ba;font-size:2rem;font-weight:800; }
.damas-medal-lock { position:absolute;left:28.3%;top:20.1%;width:43.4%;height:43.4%;display:grid;place-items:center;font-size:1rem; }
.damas-medal-card strong { font-size:.78rem;line-height:1.2; }
.damas-medal-metrics { display:flex;align-items:center;justify-content:center;gap:4px;white-space:nowrap;font-size:.65rem;line-height:1.5; }
.damas-medal-target { color:#b7cddd; }
.damas-medal-action { color:#e5ca90; }
.damas-medal-separator { color:#819caf; }
.damas-medal-share-icon { color:#ffe29b;font-size:.8rem;line-height:1; }
.damas-medal-card.is-locked { cursor:default;border-color:#6a83984d;background:#152a3d; }
.damas-medal-card.is-locked .damas-medal-frame { opacity:.7; }
.damas-achievements-status { min-height:1em;color:#b9d5e5;font-size:.76rem;line-height:1.5; }
.damas-achievements-status:empty { display:none; }
.damas-result-progress .damas-achievements-status { margin:0; }
.damas-medal-unlocked { display:flex;align-items:center;gap:12px;max-width:360px;margin:10px auto;padding:12px;border:1px solid #e6c47688;border-radius:14px;background:#18364d;text-align:left; }
.damas-medal-unlocked[hidden] { display:none; }
.damas-medal-unlocked .damas-unlocked-art { width:72px;flex:none; }
.damas-unlocked-art .damas-medal-initial { font-size:1rem; }
.damas-medal-unlocked strong { display:block;color:#ffe5a0;font-size:.8rem; }
.damas-medal-unlocked small { display:block;color:#b8d0e0;font-size:.7rem;margin:5px 0; }
.damas-medal-unlocked button { min-height:40px;border:0;background:transparent;color:#ffe5a0;font:700 .75rem system-ui;text-decoration:underline;padding:4px 0;cursor:pointer; }
.damas-progress-retry,.damas-medal-back { min-height:40px;padding:8px 12px;background:transparent;border:1px solid #7897ac70;border-radius:10px;color:#c5e2f1;font:inherit;cursor:pointer; }
.damas-medal-preview>img { display:block;width:min(100%,420px);height:auto;margin:16px auto;border-radius:16px; }
.damas-medal-invitation { color:#dae7f3;font-size:.9rem;line-height:1.65;user-select:text; }
.damas-share-actions { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px; }
.damas-share-actions button,.damas-share-actions a { display:grid;place-items:center;min-height:46px;box-sizing:border-box;border:1px solid #729ab580;border-radius:10px;background:#1c3a51;color:#eaf4fe;font:700 .76rem system-ui;text-align:center;cursor:pointer;text-decoration:none;padding:9px; }
.damas-share-actions .damas-share-primary { background:linear-gradient(135deg,#fff0b0,#dbae48);color:#172e40;border-color:#ffe6a3; }
.damas-share-actions button:disabled { opacity:.4;cursor:default; }
@media(max-width:480px) {
 .damas-achievements{padding:12px;border-radius:17px;max-height:calc(100dvh - 20px)}
 .damas-medal-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
 .damas-medal-card .damas-medal-art{width:min(100%,clamp(50px,calc((100dvh - 500px) / 4),82px))}
 .damas-medal-metrics{gap:3px;font-size:clamp(.6rem,2.6vw,.68rem)}
 .damas-week-select{flex-basis:130px}
 .damas-point-grid th,.damas-point-grid td{padding:5px 5px}
}