/* The coordinate field follows the available rectangle, with an equal unit on both axes. */
.shell{position:relative;display:grid;width:100%;max-width:none;height:var(--play-height,100dvh);padding:8px 12px;grid-template-columns:minmax(0,1fr) 340px;grid-template-rows:44px 4px minmax(0,1fr);gap:8px 12px;overflow:hidden}
.top{grid-column:1/-1;grid-row:1;height:44px;margin:0;padding:0 12px}.top .brand{font-size:17px}.brand-icon{width:30px;height:30px}
#progress{grid-column:1/-1;grid-row:2;margin:0;height:4px}#progress span{font-size:0;padding:0;height:4px}#progress span::before{display:none}
.mission{display:none}.field{position:relative;grid-column:1;grid-row:3;align-self:stretch;min-width:0;min-height:0;display:grid;grid-template-rows:28px minmax(0,1fr);border-radius:14px;overflow:hidden;background:#f9faf2;box-shadow:none}
.field-top{display:flex;align-items:center;gap:8px;height:28px;padding:0 8px;overflow:visible}.field-top #zoom{margin-left:auto;min-height:28px;padding:2px 6px;font-size:11px;white-space:nowrap}
#field-level{font-size:12px;font-weight:700;white-space:nowrap}#live-stats{font-size:10px;line-height:1.2;white-space:nowrap;min-width:0;grid-column:auto}
#scale-note{position:absolute;right:12px;bottom:3px;z-index:1;font-size:9px!important;background:#fffdf6dd;padding:1px 4px;border-radius:4px}
#board{display:block;width:100%;height:100%;min-height:0;max-height:none;aspect-ratio:auto;overflow:hidden}.field-bottom,.shell>footer{display:none}
.console{grid-column:2;grid-row:3;align-self:start;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:20px 80px 36px 236px 16px;gap:6px;padding:10px;min-height:0}.controls{display:contents}.answer-heading{display:block;grid-row:1;margin:0}.answer-row{grid-row:2;height:80px;min-height:0;padding:4px 6px}.answer-row math-field{font-size:25px}.answer-row .primary{min-height:44px;min-width:65px;padding:8px;font-size:13px}.answer-row>#clear{min-height:44px;min-width:34px}
.action-row,.input-status{grid-row:3;margin:0;min-height:0;max-height:36px;overflow:auto}.input-status{display:none}.has-error .input-status{display:block}.has-error .action-row{display:none}.action-row p{font-size:12px;line-height:1.4}
#keypad,#console[data-mode="equation"] #keypad{grid-row:4;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:repeat(4,54px);height:236px;gap:6px}#keypad button{position:static;width:auto;height:54px;min-height:44px;font-size:22px;padding:3px}.keyboard-note{grid-row:5;font-size:9px;margin:0}
#board .reference-label,#zoom-canvas .reference-label{font-size:12px;fill:#356b75;font-weight:650}
@media(max-width:799px) and (orientation:portrait){
 .shell{grid-template-columns:minmax(0,1fr);grid-template-rows:44px 4px minmax(0,1fr) auto;padding:6px 8px max(6px,env(safe-area-inset-bottom));gap:4px}
 .field{grid-column:1;grid-row:3;grid-template-rows:26px minmax(0,1fr)}.field-top{gap:4px;padding:0 5px}.field-top #zoom{font-size:10px}.field-top #field-level{font-size:11px}#live-stats{font-size:9px}
 .console{grid-column:1;grid-row:4;padding:6px;grid-template-rows:76px 28px 188px;gap:3px}.answer-heading{display:none}.answer-row{grid-row:1;height:76px}.action-row,.input-status{grid-row:2;max-height:28px}.action-row p{font-size:11px}#keypad,#console[data-mode="equation"] #keypad{grid-row:3;height:188px;grid-template-rows:repeat(4,44px);gap:4px}#keypad button{height:44px;font-size:20px}.keyboard-note{display:none}
}

@media(max-width:360px){#field-level{font-size:10px}#live-stats{font-size:8px}.field-top{gap:3px}.answer-row .primary{min-width:62px}}

#zoom-range{min-height:18px;white-space:nowrap;font-size:11px!important}#zoom-condition,#zoom-status{min-height:18px}

/* The same keys keep the same slots in every question; arrows form an inverted T. */
#keypad button.nav{background:#d1e1d5;border-color:#b7cdbc;color:#2f6253}
#keypad button[data-equation-only="true"]:disabled{opacity:.3}
.answer-row{overflow:hidden;gap:4px}
.answer-scroll{flex:1 1 0%;width:0;min-width:0;max-height:64px;overflow:auto;overscroll-behavior:contain}
.answer-scroll math-field{width:100%;min-width:0;max-width:100%;font-size:23px;overflow-x:auto}
.answer-scroll math-field::part(container){padding:4px 0}
.answer-row .equals{font-size:21px}
.answer-record{margin-top:12px;padding:10px;background:#f5f7ee;border-radius:12px;min-width:0}
.answer-record>p{margin:0 0 4px}.record-math{display:block;width:100%;max-width:100%;overflow:auto;font-size:22px;pointer-events:none}
.raw-answer{font-size:12px;color:#697b70}.raw-answer summary{min-height:24px;padding:4px 0}.raw-answer code{display:block;white-space:pre-wrap;overflow-wrap:anywhere}
#rotate-note{display:none}
@media(orientation:landscape) and (max-height:600px){
 body[data-playing="true"] .shell{display:none!important}
 body[data-playing="true"] #rotate-note{position:fixed;inset:0;z-index:4;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px max(24px,env(safe-area-inset-right)) 20px max(24px,env(safe-area-inset-left));text-align:center;background:var(--bg)}
 #rotate-note h2{font-size:22px;margin:0 0 12px}#rotate-note p{font-size:14px;max-width:400px;margin:0 0 10px}
}