body.dragons-game { background:#e8f2eb; color:#3d5c70; }
.dragons-game > header,.dragons-game > footer { display:none; }
.dragons-game #app { width:min(1100px,100%); max-width:1100px; min-height:100dvh; margin:auto; padding:0 18px 16px; background:#fffdf5; }
.dg-shell { font-family:Library,'Trebuchet MS',sans-serif; letter-spacing:0; }
.dg-shell * { box-sizing:border-box; }
.dg-shell h1,.dg-shell h2,.dg-shell h3,.dg-shell button,.dg-shell input,.dg-shell a { font-family:inherit; }
.dg-shell button,.dg-shell a.dg-secondary { min-width:48px; min-height:48px; padding:10px 14px; border-radius:8px; font-size:16px; line-height:1.2; font-weight:800; cursor:pointer; }
.dg-shell button:disabled { opacity:.65; cursor:default; }
.dg-shell :focus-visible { outline:3px solid #9d6bb7; outline-offset:3px; }
.dg-primary { border:2px solid #357b81; background:#408b8d; color:#fff; box-shadow:0 3px 0 #2e6b74; }
.dg-primary:hover { background:#337c81; }
.dg-secondary { display:inline-flex; align-items:center; justify-content:center; border:1px solid #b3c7ca; color:#44677c; background:#fbfdf3; text-decoration:none; }
.dg-secondary:hover { background:#eaf3e5; }
.dg-toolbar { display:flex; gap:9px; align-items:center; padding:8px 0; border-bottom:1px solid #d8e2d5; }
.dg-toolbar > div { flex:1; min-width:0; }
.dg-toolbar h1 { font-size:17px; line-height:1.2; margin:0 0 4px; }
.dg-toolbar span { font-size:12px; }
.dg-toolbar > a { font-size:14px!important; white-space:nowrap; }
.dg-sound { width:48px; padding:3px!important; font-size:25px!important; }
.dg-effects { display:flex; align-items:center; gap:5px; min-height:48px; font-size:12px; }
.dg-effects input { width:18px; height:18px; accent-color:#408b8d; }
.dg-mission { margin:10px 0; padding:9px 13px; background:#fff0cb; border-left:4px solid #e7bc58; }
.dg-mission > span { font-size:12px; font-weight:800; color:#9f798f; }
.dg-mission h2 { margin:4px 0 0; font-size:20px; line-height:1.35; }
.dg-workspace { display:grid; grid-template-columns:minmax(0,1fr) 310px; gap:18px; align-items:start; }
.dg-workspace > * { min-width:0; }
.dg-paper { background:#fbfcf2; border:1px solid #cbded5; border-radius:6px; }
.dg-paper-top { height:48px; display:flex; align-items:center; justify-content:space-between; gap:8px; padding:0 12px; border-bottom:1px solid #dce5d5; background:#e8efda; }
.dg-paper-top > span { font-size:13px; font-weight:700; }
.dg-paper-top .dg-dragon { width:48px; height:46px; }
.dg-drawing { display:block; width:100%; height:326px; }
.dg-controls { display:flex; flex-direction:column; gap:12px; padding-top:5px; }
.dg-dimensions { display:flex; flex-direction:column; gap:22px; }
.dg-dimension-title { display:flex; align-items:center; justify-content:center; gap:6px; font-size:16px; font-weight:800; min-height:24px; }
.dg-lock { font-size:16px; }
.dg-stepper { display:grid; grid-template-columns:48px minmax(0,1fr) 48px; gap:8px; align-items:center; margin-top:7px; }
.dg-stepper > button { width:48px; height:48px; padding:3px; border:1px solid #b5abc8; background:#f0e7f7; color:#725d8a; font-size:28px; }
.dg-stepper > strong { text-align:center; font-size:21px; line-height:1.3; color:#4c7280; }
.dg-turn { display:grid; grid-template-columns:48px minmax(0,1fr) 48px; gap:8px; align-items:center; margin-top:5px; }
.dg-turn > button { width:48px; height:48px; padding:3px!important; font-size:28px; }
.dg-turn > span { text-align:center; font-size:14px; font-weight:700; }
.dg-label-fields { display:grid; grid-template-columns:repeat(auto-fit,minmax(80px,1fr)); gap:8px; }
.dg-label-fields > label { font-size:15px; font-weight:700; text-align:center; }
.dg-label-fields input { display:block; width:62px; height:52px; margin:7px auto 0; border:2px solid #a4babc; border-radius:5px; padding:5px; font-size:27px; font-weight:800; text-align:center; color:#426a7b; background:#fffef5; }
.dg-label-fields input:disabled { background:#e4f2de; opacity:.95; }
.dg-label-fields small { display:block; font-size:11px; color:#54816f; padding-top:4px; }
.dg-keypad { display:grid; grid-template-columns:repeat(3,48px); gap:5px; justify-content:center; margin-top:15px; }
.dg-keypad > button { width:48px; height:48px; padding:3px; border:1px solid #c3b4cd; background:#f2eaf7; color:#75608a; font-size:21px; }
.dg-passport { margin:0; padding:0; border:0; min-width:0; }
.dg-passport legend { padding:0; margin:0 0 12px; font-size:18px; font-weight:800; color:#8f6ca4; }
.dg-passport label { display:flex; align-items:center; gap:9px; padding:10px; min-height:66px; margin-bottom:10px; background:#eff5e8; border:1px solid #bbd0b9; border-radius:6px; font-size:17px; line-height:1.35; font-weight:700; cursor:pointer; }
.dg-passport label:focus-within { outline:3px solid #9d6bb7; outline-offset:2px; }
.dg-passport input { width:21px; height:21px; flex-shrink:0; accent-color:#438b88; }
.dg-room-reward { display:flex; align-items:center; justify-content:center; gap:9px; min-height:70px; color:#9a709e; }
.dg-room-reward svg { width:56px; height:70px; }
.dg-room-reward strong { font-size:17px; }
.dg-feedback { min-height:80px; display:flex; align-items:center; margin:9px 0; padding:9px 12px; border-left:4px solid #b79dc7; background:#f4ebf7; font-size:16px; line-height:1.4; }
.dg-actions { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.dg-actions > .dg-primary { min-width:170px; }
.dg-cover { padding:24px 0 12px; text-align:center; }
.dg-eyebrow { color:#9775a6; font-size:14px; }
.dg-cover h2 { font-size:32px; line-height:1.2; margin:10px 0 14px; }
.dg-cover > p:not(.dg-eyebrow) { max-width:700px; margin:0 auto 18px; font-size:18px; line-height:1.5; }
.dg-cover img { display:block; width:min(700px,100%); aspect-ratio:3/2; object-fit:cover; margin:20px auto 12px; border-radius:8px; }
.dg-cover > span { font-size:14px; }
.dg-help { position:fixed; inset:0; width:min(550px,calc(100% - 24px)); max-height:calc(100dvh - 24px); margin:auto; padding:22px; border:3px solid #af9bc6; border-radius:8px; background:#fffdf5; color:#476578; box-shadow:0 0 0 100vmax #31485e66; overflow:auto; }
.dg-help h2 { font-size:23px; margin:0 0 12px; }
.dg-help p { font-size:17px; line-height:1.5; }
.dg-finish { padding:18px 0; }
.dg-finish > h2 { font-size:30px; margin:0 0 8px; }
.dg-summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin:18px 0; }
.dg-summary > div { display:flex; flex-direction:column; gap:4px; padding:9px 0; border-top:4px solid #e5c16d; }
.dg-summary strong { font-size:32px; color:#43818b; }
.dg-summary span { font-size:14px; }
.dg-castle { display:block; width:100%; max-height:500px; }
.dg-castle [role="button"] { cursor:pointer; }
.dg-decoration { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin:14px 0; }
.dg-decoration > strong { font-size:17px; min-width:190px; }
.dg-swatches { display:flex; gap:7px; flex-wrap:wrap; }
.dg-swatch { width:48px; height:48px; padding:0!important; border:2px solid #fff; background:var(--swatch); box-shadow:0 0 0 1px #b2c4bf; color:#3e5971; }
.dg-swatch[aria-pressed="true"] { outline:3px solid #527f90; outline-offset:1px; }
.dg-decor-options { display:flex; flex-wrap:wrap; gap:6px; }
.dg-decor-options button { background:#f3eaf7; color:#7a648d; border:1px solid #bba7cb; }
.dg-decor-options [aria-pressed="true"] { border:3px solid #9073a5; background:#ece0f3; }
.dg-finish details { padding:12px 0; border-bottom:1px solid #d6dfd3; }
.dg-finish summary { min-height:28px; cursor:pointer; font-weight:700; }
.dg-finish details p { font-size:16px; line-height:1.5; }
.dg-bonus-buttons { display:flex; flex-wrap:wrap; gap:8px; }
.dg-bonus-art { display:block; width:min(500px,100%); margin:12px auto; }
.dg-building { animation:dg-create .55s ease-out; }
@keyframes dg-create { 0% { opacity:.5; } 100% { opacity:1; } }
@media (min-width:901px) and (max-height:740px) { .dg-toolbar { padding:5px 0; } .dg-mission { margin:6px 0; padding:7px 11px; } .dg-mission h2 { font-size:19px; } .dg-paper-top { height:36px; } .dg-paper-top .dg-dragon { height:34px; } .dg-drawing { height:304px; } .dg-feedback { min-height:72px; margin:7px 0; } }
@media (max-width:900px) { .dg-workspace { grid-template-columns:minmax(0,1fr) 280px; gap:12px; } .dg-stepper { gap:5px; } .dg-stepper > strong { font-size:19px; } }
@media (max-width:800px) { .dg-toolbar { flex-wrap:wrap; } .dg-toolbar > div { min-width:240px; } .dg-effects { margin-left:auto; } .dg-workspace { grid-template-columns:1fr; gap:10px; } .dg-controls { display:grid; grid-template-columns:minmax(0,1fr) 200px; align-items:center; gap:12px; } .dg-dimensions { flex-direction:row; gap:20px; } .dg-dimension { flex:1; min-width:0; } .dg-turn { margin:0; } .dg-controls > form { display:flex; gap:20px; align-items:center; } .dg-label-fields { flex:1; } .dg-keypad { margin:0; } .dg-passport { grid-column:1; } .dg-paper-top { height:36px; } .dg-paper-top .dg-dragon { height:34px; } }
@media (max-width:600px) { .dragons-game #app { padding:0 10px 16px; } .dg-toolbar { gap:6px; padding:4px 0; } .dg-toolbar > div { min-width:0; flex-basis:calc(100% - 160px); } .dg-toolbar h1 { font-size:15px; } .dg-toolbar > a { font-size:12px!important; padding:8px!important; } .dg-toolbar > button[data-dg-action="help"] { font-size:13px; } .dg-effects { margin-left:0; } .dg-mission { padding:8px; } .dg-mission h2 { font-size:18px; } .dg-mission > span { font-size:11px; } .dg-paper-top > span { font-size:11px; } .dg-paper-top { padding:0 7px; } .dg-drawing { height:auto; aspect-ratio:1; } .dg-controls { display:flex; flex-direction:column; gap:12px; align-items:stretch; } .dg-dimensions { flex-direction:column; gap:12px; } .dg-stepper > strong { font-size:21px; } .dg-dimension-title { font-size:15px; } .dg-controls > form { display:block; } .dg-keypad { margin-top:12px; } .dg-label-fields { gap:6px; } .dg-label-fields > label { font-size:14px; } .dg-label-fields input { width:60px; height:50px; } .dg-passport label { font-size:16px; min-height:60px; } .dg-feedback { min-height:96px; font-size:14px; padding:8px; } .dg-actions button { font-size:14px; padding:9px; } .dg-actions > .dg-primary { flex:1; } .dg-cover { padding:14px 0; } .dg-cover h2 { font-size:27px; } .dg-cover > p:not(.dg-eyebrow) { font-size:16px; } .dg-cover img { margin:15px auto 10px; } .dg-summary { gap:8px; } .dg-summary span { font-size:12px; } .dg-summary strong { font-size:28px; } .dg-decoration { gap:9px; } .dg-bonus-buttons { flex-direction:column; } .dg-bonus-buttons > button { white-space:normal; line-height:1.4; } }
@media (prefers-reduced-motion:reduce) { .dg-shell * { animation:none!important; scroll-behavior:auto!important; } }
@media (max-width:360px) { .dragons-game #app { padding-left:6px; padding-right:6px; } }
.dg-still * { animation:none!important; }