/* Compact personal header; all font bytes are served from this website. */
@font-face{font-family:GardenCalligraphy;src:url('?asset=assets%2Ffonts%2Fgreat-vibes.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
body.view-dashboard .app-header{height:70px;min-height:70px;padding-top:7px;padding-bottom:13px}
body.view-dashboard .app-header .brand-seal,body.view-dashboard .app-header>.round{top:14px}
.view-dashboard .dashboard{padding-top:0}
.view-dashboard .greeting{position:relative;z-index:2;text-align:center;padding:0;margin:-12px 0 5px;pointer-events:none}
.view-dashboard .greeting h1{font:400 46px/.95 GardenCalligraphy,'Snell Roundhand','Apple Chancery',cursive;letter-spacing:0;margin:0 auto;padding:0 3px 2px;color:#2b5947;text-shadow:0 1px 0 #fffbe8,0 3px 2px #f7f5df,0 5px 7px #223b3552;transform:rotate(-4deg);overflow-wrap:anywhere;max-width:100%}
.view-dashboard .kpi-grid.kpi-circles{grid-template-columns:repeat(4,58px);justify-content:center;gap:12px;margin:4px 0 11px}
.view-dashboard .kpi-circles .kpi>.icon{width:11px;height:11px;left:calc(50% - 5.5px);top:10%}
.view-dashboard .kpi-circles .kpi>strong{font-size:14px;letter-spacing:-.5px;top:35%}
.view-dashboard .kpi-circles .kpi>small{font-size:6.5px;top:68%}
@media(max-width:350px){.view-dashboard .kpi-grid.kpi-circles{grid-template-columns:repeat(4,54px);gap:10px}.view-dashboard .kpi-circles .kpi>strong{font-size:13px}.view-dashboard .greeting h1{font-size:42px}}
/* Familiar examples are quiet fixed landmarks, never draggable answers. */
.view-game .board-cell.orientation-element,.view-game .board-cell.orientation-element:disabled{position:relative;opacity:1;background:linear-gradient(145deg,#d5eed5d9,#8cb59f9c);border:1px solid #e2f4cf;color:#183d38;box-shadow:inset 0 1px 4px #fff7;cursor:default}
.view-game .board-cell.orientation-element b{font-size:9px;line-height:1;display:block;margin-top:5px}
.view-game .board-cell.orientation-element small{position:absolute;top:1px;left:2px;font-size:5px;line-height:1}
.view-game .board-scroll.zoomed .orientation-element b{font-size:16px;margin-top:6px}
.view-game .board-scroll.zoomed .orientation-element small{font-size:8px}
.view-game .match-reference{position:relative;border:1px solid #dfefb0aa;border-radius:7px;background:#294e49e6;color:#f4ffe4;pointer-events:none;z-index:1;padding:3px 2px;text-align:center;line-height:1.1}
.view-game .match-reference b{display:block;font-size:12px;font-weight:650}
.view-game .match-reference span{display:block;font-size:8px;white-space:nowrap;margin-top:2px}
.view-game .numeric-graph .match-reference{position:absolute;left:1%;width:22%;min-height:32px}
.view-game .numeric-graph .match-reference:after{content:'';position:absolute;left:100%;top:0;width:325%;border-top:1px dotted #d5ec9a66;pointer-events:none}
.view-game .numeric-graph.has-orientation .match-axis{opacity:.65}
.view-game .match-graph:not(.numeric-graph) .match-reference{grid-column:auto;min-height:32px}
.view-game.method-place #learning-hint,.view-game.method-match #learning-hint{display:none}
/* Keep the draggable card and table together. */
.view-game .game-area.method-place .element-card{touch-action:none;cursor:grab;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.view-game .game-area.method-place .element-card.place-dragging{opacity:.38;cursor:grabbing}
.place-drag-active,.place-drag-active *{cursor:grabbing!important}
.place-drag-ghost{position:fixed;z-index:150;pointer-events:none;transform:translate(-50%,calc(-100% - 22px));width:84px;max-width:90vw;padding:8px 4px;border:2px solid #e2fcff;border-radius:14px;background:#12617c;color:#fff;text-align:center;box-shadow:0 8px 24px #001728b3;font:700 13px/1.2 -apple-system,BlinkMacSystemFont,sans-serif}
.place-drag-ghost[hidden]{display:none}
.place-drag-ghost strong{display:block;font-size:32px;line-height:1.1}.place-drag-ghost small{display:block;font-size:10px;overflow-wrap:anywhere;margin-top:3px}
.view-game .game-area.method-place .board-cell.place-drop-hover{outline:2px solid #fff;outline-offset:1px;background:#297987;border-color:#fff;box-shadow:0 0 0 4px #a0faff65;z-index:4}
.view-game .game-area.method-place .question-stage{overflow-y:auto}
.view-game .game-area.method-place .element-scene{flex:0 0 auto;min-height:76px;height:clamp(76px,calc(var(--game-height,100dvh) * .19),126px);margin:0}
.view-game .game-area.method-place .element-card{height:100%;min-height:0;min-width:105px;width:136px;padding:7px 9px;justify-content:center}
.view-game .game-area.method-place .chemical-symbol{font-size:clamp(36px,calc(var(--game-height,100dvh) * .075),52px);margin-top:0}
.view-game .game-area.method-place .element-name{font-size:14px}
.view-game .game-area.method-place .board-tools{display:flex;align-items:center;justify-content:space-between;gap:6px;margin:2px 0;min-height:44px}
.view-game .game-area.method-place .board-tools>span{font-size:11px;font-weight:650;line-height:1.2;color:#fff;min-width:0}
.view-game .game-area.method-place #zoom-board{min-height:44px;padding:7px 10px;flex:0 0 auto;font-size:12px;touch-action:manipulation}
.view-game .game-area.method-place #place-options{display:flex;flex-direction:column;flex:1 1 0;min-height:219px}
.view-game .game-area.method-place .periodic-board{grid-template-rows:12px repeat(7,minmax(13px,1fr)) 4px repeat(2,minmax(13px,1fr));min-height:159px;height:100%}
.view-game .game-area.method-place .board-scroll{padding:5px 3px;flex:1 1 0;min-height:171px}
.view-game .game-area.method-place .help-button{min-height:44px}
.view-game .game-area.method-place .board-scroll.zoomed{max-height:calc(var(--game-height,100dvh) - 300px);min-height:160px;overscroll-behavior:contain}
.view-game .game-area.method-place .board-scroll.zoomed .periodic-board{height:470px;grid-template-columns:18px repeat(18,44px);grid-template-rows:23px repeat(7,44px) 13px 44px 44px;width:850px}
@media(max-height:560px){.view-game .game-area.method-place .game-question{font-size:19px}.view-game .game-area.method-place .element-scene{height:76px}.view-game .game-area.method-place .element-name{font-size:12px}}
@media(prefers-reduced-motion:reduce){.place-drag-ghost{transition:none}}
