/* Isolated entry-flow prototype. Approved gameplay art and controls remain in flashcards-approved.css. */
#flashcardsApp [hidden]{display:none!important}
#flashBuilderView.wrap{padding-top:24px;padding-bottom:28px}
#flashBuilderView .flash-library{padding:24px;margin-bottom:0}
#flashBuilderView .flash-library-top{margin-bottom:16px;gap:20px}
#flashBuilderView .flash-library h1{font-size:clamp(30px,3.5vw,43px);margin-bottom:5px}
#flashBuilderView .flash-library h2{font-size:clamp(22px,2.4vw,30px);margin-bottom:9px}
#flashBuilderView .flash-library-top p{font-size:15px;max-width:650px}
#flashBuilderView .flash-step-label{font-size:10px;letter-spacing:.1em;margin-bottom:6px}
#flashBuilderView .flash-topic-box{padding:13px;min-width:240px}
#flashBuilderView .flash-create-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 16px;padding:10px 0;border-top:1px solid #dfe3ef;border-bottom:1px solid #dfe3ef;font-size:13px;color:#40506d}
#flashBuilderView .flash-create-row>span{font-weight:800;margin-right:3px}
#flashBuilderView .flash-create-row button,.flash-back,.flash-qr-button{border:1px solid #d0d8ec;border-radius:10px;background:#fff;color:#1a275b;min-height:40px;padding:8px 12px;font:inherit;font-weight:750;cursor:pointer}
#flashBuilderView .flash-create-row #flashResumeDraft{margin-left:auto;color:#5b21b6}
#flashBuilderView .flash-template-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
#flashBuilderView .flash-library-card{min-height:226px;padding:18px}
#flashBuilderView .flash-template-icon{height:44px;min-width:44px;font-size:26px}
#flashBuilderView .flash-library-card h3{font-size:21px;margin:12px 0 7px}
#flashBuilderView .flash-template-foot{display:block}
#flashBuilderView .flash-template-foot>span{display:block;font-size:11px;margin:0 0 10px;color:#58647b}
#flashBuilderView .flash-template-actions{display:flex;gap:8px}
#flashBuilderView .flash-template-actions button{font-size:14px;min-height:44px;flex:1;white-space:nowrap;padding:10px}
#flashBuilderView .flash-template-use{background:#006cf2;border-radius:12px;box-shadow:0 4px 8px #10386017}
#flashBuilderView .flash-template-use:hover{background:#005bca}
#flashBuilderView .flash-template-customize{color:#38206e;border:1px solid #d8cceb;border-radius:12px;font:inherit;font-weight:800;background:#f8f5ff;cursor:pointer}
#flashBuilderView .flash-library-more{margin-top:16px;min-height:44px;padding:10px 16px;font-size:14px}
#flashEditor .flash-editor-heading{position:relative;padding:0 0 14px}
#flashEditor .flash-back{float:right}
#flashEditor .flash-editor-heading h2{margin:0 0 6px;font-size:28px;color:#201557}
#flashEditor .flash-editor-heading p{margin:0;max-width:700px;color:#526175;font-size:15px}
#flashEditor .flash-editor-toolbar{border:1px solid #dfe3ef;background:#fff;border-radius:18px;padding:12px 16px;margin-bottom:16px;display:flex;gap:16px;align-items:center;box-shadow:0 7px 20px #163b6b08}
#flashEditor .flash-save-actions{display:flex;gap:8px;flex-wrap:wrap;flex-shrink:0}
#flashEditor .flash-status{margin:0;font-size:13px;min-height:0;line-height:1.4}
#flashEditor .flash-save-actions .btn{min-height:44px;font-size:14px;padding:11px 17px;border:0;white-space:nowrap}
#flashEditor .flash-builder{grid-template-columns:minmax(0,1.4fr) minmax(300px,.85fr);gap:18px;align-items:start}
#flashEditor .flash-card{padding:22px}
#flashEditor .flash-type-label{font-size:13px;margin:0;color:#465570}
#flashEditor .flash-type-tabs{margin:7px 0 20px;grid-template-columns:repeat(2,minmax(0,1fr))}
#flashEditor .flash-tab{padding:11px}
#flashEditor .flash-tab strong{font-size:13px}
#flashEditor .flash-tab span{font-size:11px;line-height:1.35}
#flashEditor .flash-new-set{width:auto;margin:10px 0 14px;font-size:12px;min-height:38px;padding:8px 12px}
#flashEditor .flash-share{margin-top:0;padding:20px;background:#f4fcf7;border:1px solid #c3e6cf}
#flashEditor .flash-share h3{font-size:20px;margin-bottom:8px}
#flashEditor .flash-share p{font-size:13px;line-height:1.45}
#flashEditor .flash-snapshot-note{font-size:11.5px!important;color:#516458}
#flashEditor details{font-size:12px;color:#40564a}
#flashEditor summary{cursor:pointer;padding:5px 0;font-weight:750}
#flashEditor .flash-linkbox{margin-top:8px;display:flex;flex-wrap:wrap}
#flashEditor .flash-linkbox input{width:100%;flex-basis:100%;font-size:12px}
#flashEditor .flash-linkbox button{font-size:12px;min-height:36px;padding:7px 12px}
#flashEditor .flash-live-preview{margin-top:18px}
#flashEditor .flash-live-preview h3{margin-bottom:5px;font-size:19px}
#flashPreviewCount{font-size:12px;font-weight:500;color:#607089}
#flashEditor .flash-preview-row{overflow-wrap:anywhere}
#flashEditor .flash-preview-row em{min-width:0;display:flex;flex-wrap:wrap}
#flashEditor button:disabled{opacity:.5;cursor:not-allowed;box-shadow:none}
#flashEditor .flash-qr-panel{margin-top:16px;padding-top:14px;border-top:1px solid #cce4d5}
#flashEditor .flash-qr-panel h4{font-size:15px;margin:0 0 7px;color:#284e38}
#flashEditor #flashQRStatus{font-size:11.5px}
#flashEditor #flashQRImage canvas{display:block;width:min(100%,290px);height:auto;background:white;margin:10px auto;image-rendering:pixelated}
#flashEditor #flashQRActions{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;margin-top:10px}
#flashEditor .flash-qr-button{font-size:11px;min-height:38px;padding:8px 10px}
#flashcardsApp button:focus-visible,#flashcardsApp summary:focus-visible{outline:3px solid #1764cb;outline-offset:3px}
body.flash-entry-practice>.site-header,body.flash-entry-practice>.site-footer{display:none!important}
#flashPracticeView .flash-practice-top{flex-wrap:wrap}
#flashPracticeView .flash-deck-title{flex:1;min-width:190px}
#flashPracticeView #practiceEditReturn{font-size:12px}
@media(max-width:1050px){
 #flashBuilderView .flash-library-top{flex-direction:row}
 #flashBuilderView .flash-topic-box{width:260px;max-width:260px;min-width:230px}
 #flashEditor .flash-editor-toolbar{align-items:flex-start;flex-direction:column;gap:8px}
}
@media(max-width:850px){
 #flashEditor .flash-builder{grid-template-columns:minmax(0,1fr)}
 #flashBuilderView .flash-template-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:620px){
 #flashBuilderView.wrap{padding:14px 12px 25px}
 #flashBuilderView .flash-library{padding:17px 13px;border-radius:22px}
 #flashBuilderView .flash-library-top{flex-direction:column;gap:12px;margin-bottom:10px}
 #flashBuilderView .flash-library h1{font-size:30px}
 #flashBuilderView .flash-library h2{font-size:22px}
 #flashBuilderView .flash-library-top p{font-size:13px;line-height:1.45}
 #flashBuilderView .flash-topic-box{padding:0;border:0;background:transparent;box-shadow:none;width:100%;max-width:none;min-width:0}
 #flashBuilderView .flash-topic-box label{font-size:12px;margin-bottom:5px}
 #flashBuilderView .flash-topic-box input{min-height:42px;font-size:14px;box-sizing:border-box}
 #flashBuilderView .flash-topic-box small{display:none}
 #flashBuilderView .flash-create-row{padding:8px 0;gap:6px;margin-bottom:11px}
 #flashBuilderView .flash-create-row>span{width:100%;font-size:11px}
 #flashBuilderView .flash-create-row button{font-size:11px;min-height:38px;padding:7px 9px}
 #flashBuilderView .flash-create-row #flashResumeDraft{margin-left:0}
 #flashBuilderView .flash-library-count{font-size:10px;margin-bottom:9px}
 #flashBuilderView .flash-template-grid{grid-template-columns:minmax(0,1fr);gap:11px}
 #flashBuilderView .flash-library-card{padding:13px;min-height:0}
 #flashBuilderView .flash-library-card-top{float:right;align-self:stretch}
 #flashBuilderView .flash-template-icon{height:34px;min-width:34px;font-size:21px}
 #flashBuilderView .flash-template-grade{font-size:10px;padding:5px 8px}
 #flashBuilderView .flash-library-card h3{margin:9px 0 5px;font-size:20px}
 #flashBuilderView .flash-library-card p{font-size:12px;margin-bottom:9px}
 #flashBuilderView .flash-template-foot>span{font-size:10px;margin-bottom:8px}
 #flashBuilderView .flash-template-actions button{min-height:44px;font-size:13px}
 #flashEditor{padding-bottom:114px}
 #flashEditor .flash-editor-heading{padding:0 0 14px}
 #flashEditor .flash-editor-heading h2{font-size:24px;padding-top:50px}
 #flashEditor .flash-back{position:absolute;left:0;top:0;float:none;min-height:38px;font-size:12px}
 #flashEditor .flash-editor-heading p{font-size:13px}
 #flashEditor .flash-editor-toolbar{position:fixed;z-index:80;bottom:0;left:0;right:0;margin:0;border-radius:18px 18px 0 0;padding:10px 12px max(10px,env(safe-area-inset-bottom));gap:7px;box-shadow:0 -5px 20px #15355b12}
 #flashEditor .flash-save-actions{width:100%;flex-wrap:nowrap;gap:6px}
 #flashEditor .flash-save-actions .btn{flex:1;min-width:0;font-size:11px;padding:10px 6px;min-height:44px}
 #flashEditor .flash-status{font-size:11px;line-height:1.3;min-height:15px}
 #flashEditor .flash-type-tabs{margin:7px 0 16px;gap:8px}
 #flashEditor .flash-tab strong{font-size:12px}
 #flashEditor .flash-tab span{font-size:10px}
 #flashEditor .flash-card{padding:17px}
 #flashEditor .flash-linkbox input{box-sizing:border-box}
}
@media(prefers-reduced-motion:reduce){#flashBuilderView *{scroll-behavior:auto!important;transition:none!important}}
/* Quick-play needs an exit even in the early-reader route. */
#flashPracticeView.flash-young #practiceHome{display:block!important}
/* Owner revision: approximately 40% of the original desktop tile footprint.
   Whole tile plays. Customize is a separate sibling button, never nested. */
#flashBuilderView .flash-template-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:11px}
#flashBuilderView .flash-library-card{position:relative;min-height:0;height:132px;padding:0;border-radius:17px;background:var(--tile-bg);border:1px solid #d9dfec;transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;overflow:visible}
#flashBuilderView .flash-template-play{position:relative;display:flex;flex-direction:column;align-items:flex-start;width:100%;height:100%;border:0;border-radius:17px;background:transparent;padding:13px 12px 45px;font:inherit;color:var(--tile-accent);cursor:pointer;text-align:left}
#flashBuilderView .flash-template-icon{font-size:23px;min-width:31px;width:31px;height:29px;border-radius:8px;background:#ffffffa6;margin-bottom:7px}
#flashBuilderView .flash-template-title{display:block;font-size:16px;line-height:1.15;letter-spacing:-.02em;max-width:100%;color:var(--tile-accent);font-weight:850}
#flashBuilderView .flash-template-meta{position:absolute;left:12px;bottom:13px;font-size:9px;font-weight:600;color:#54617a;line-height:1.2;max-width:46%}
#flashBuilderView .flash-template-customize{position:absolute;right:8px;bottom:7px;z-index:1;min-height:40px;max-width:48%;padding:7px 8px;border:1px solid #d0d6e6;border-radius:10px;background:#ffffffdb;color:#27365c;font:inherit;font-size:10px;font-weight:800;cursor:pointer}
#flashBuilderView .flash-library-card:focus-within{border-color:var(--tile-accent);box-shadow:0 8px 18px #1b32551a}
#flashBuilderView .flash-template-play:focus-visible{outline:3px solid #1457b2;outline-offset:3px}
#flashBuilderView .flash-template-customize:focus-visible{outline:3px solid #1457b2;outline-offset:2px}
@media(hover:hover) and (pointer:fine){#flashBuilderView .flash-library-card:hover{transform:translateY(-4px);border-color:var(--tile-accent);box-shadow:0 9px 20px #1b32551b}#flashBuilderView .flash-template-customize:hover{background:white}}
@media(max-width:1050px){#flashBuilderView .flash-template-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:850px){#flashBuilderView .flash-template-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:620px){
 #flashBuilderView .flash-template-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 #flashBuilderView .flash-library-card{height:145px}
 #flashBuilderView .flash-template-play{padding:12px 10px 45px}
 #flashBuilderView .flash-template-title{font-size:15px}
 #flashBuilderView .flash-template-meta{left:10px;bottom:13px;font-size:8px;max-width:40%}
 #flashBuilderView .flash-template-customize{right:6px;bottom:6px;min-height:44px;font-size:9px;padding:7px 6px;max-width:54%}
}
@media(prefers-reduced-motion:reduce){#flashBuilderView .flash-library-card{transition:none!important;transform:none!important}}

/* Keep the first template within reach on narrow phones, not below stacked setup controls. */
@media(max-width:360px){
 #flashBuilderView .flash-step-label{display:none}
 #flashBuilderView .flash-library h1{font-size:28px}
 #flashBuilderView .flash-library h2{font-size:18px;letter-spacing:-.03em}
 #flashBuilderView .flash-create-row button{font-size:10px;padding:7px 5px;min-height:44px}
 #flashBuilderView .flash-create-row{gap:5px}
}

/* Owner revision 2: playful HQ game-show energy, without adding an entry step. */
#flashBuilderView .flash-library{border:2px solid #cfdbf4;background:linear-gradient(135deg,#f3faff 0%,#f7f2ff 60%,#fff9e6 100%);box-shadow:0 7px 0 #d8e4fc,0 20px 40px #123c6912;overflow:hidden}
#flashBuilderView .flash-library-top{position:relative;isolation:isolate;margin:-24px -24px 14px;padding:20px 24px 21px;background:radial-gradient(circle at 55% -30%,#2175e9 0,transparent 43%),linear-gradient(120deg,#0b1d50,#103475);border-bottom:5px solid #ffd334;overflow:hidden}
#flashBuilderView .flash-library-top::after{content:"";position:absolute;inset:0;z-index:-1;opacity:.24;background-image:radial-gradient(#63cbff 1px,transparent 1.5px);background-size:13px 13px;mask-image:linear-gradient(90deg,transparent,#000)}
#flashBuilderView .flash-library-top>div:first-child{position:relative;z-index:1}
#flashBuilderView .flash-step-label{display:inline-block;color:#ffe16a;background:#ffffff0f;border:1px solid #9fc7ff44;border-radius:20px;padding:4px 10px;margin-bottom:7px;font-size:10px;line-height:1.2;letter-spacing:.14em}
#flashBuilderView .flash-library h1{color:#fff;font-size:clamp(30px,3.5vw,42px);line-height:1.08;margin-bottom:5px;letter-spacing:-.035em;text-shadow:0 3px 0 #06143f}
#flashBuilderView .flash-library h2{color:#ffdc46;font-size:clamp(21px,2.4vw,28px);line-height:1.18;margin-bottom:8px;letter-spacing:-.025em}
#flashBuilderView .flash-library-top p{color:#e3efff;font-size:14px;line-height:1.4;max-width:490px}
#flashBuilderView .flash-hero-cheer{position:absolute;z-index:0;right:333px;bottom:0;width:124px;height:auto;transform:rotate(9deg);filter:drop-shadow(0 6px 3px #020f3229);pointer-events:none}
#flashBuilderView .flash-topic-box{position:relative;z-index:2;border:2px solid #c6e2ff;background:#f5fbff;box-shadow:0 5px 0 #06163952;transform:rotate(1deg)}
#flashBuilderView .flash-topic-box label{color:#092b65}
#flashBuilderView .flash-topic-box small{color:#455f7c}
#flashBuilderView .flash-topic-box input{border:1px solid #a5bcdf;background:#fff}
#flashBuilderView .flash-create-row{border-top:0;border-bottom:1px solid #cddaf3;margin-bottom:13px;padding-top:0;padding-bottom:12px;color:#173464}
#flashBuilderView .flash-create-row button{border:1px solid #a1b9e5;box-shadow:0 3px 0 #c6d7f4;background:#fff;color:#123369}
#flashBuilderView .flash-create-row button:hover{background:#edf6ff;border-color:#2563eb}
#flashBuilderView .flash-library-count{color:#183b6b;font-weight:800}
#flashBuilderView .flash-library-card{border:1px solid color-mix(in srgb,var(--tile-accent) 40%,white);box-shadow:0 4px 0 color-mix(in srgb,var(--tile-accent) 70%,white),0 7px 13px #15387212;background:linear-gradient(130deg,#ffffff35,transparent 65%),var(--tile-bg)}
#flashBuilderView .flash-library-card::before{content:"";position:absolute;top:0;left:0;right:0;height:5px;border-radius:17px 17px 0 0;background:var(--tile-accent);opacity:.85;pointer-events:none}
#flashBuilderView .flash-template-icon{background:#ffffffd9;box-shadow:0 2px 0 #ffffff80;border:1px solid #ffffffd9;transform:rotate(-5deg)}
#flashBuilderView .flash-library-card:nth-child(even) .flash-template-icon{transform:rotate(5deg)}
#flashBuilderView .flash-template-meta{color:#344b66}
#flashBuilderView .flash-template-customize{border-color:#a9bad3;background:#fffffff0;box-shadow:0 2px 0 #ffffff66;color:#163361}
#flashBuilderView .flash-library-more{background:#ffda36;border:2px solid #12336d;color:#0a2255;box-shadow:0 4px 0 #8aa6d9;font-weight:850}
#flashBuilderView .flash-library-more:hover{background:#ffe764}
#flashEditor .flash-share{background:#f1f9ff;border:1px solid #b9d9f1;border-top:6px solid #ffc928}
#flashEditor .flash-share h3{color:#10336b}
#flashEditor .flash-share details{padding:10px;border:1px solid #adc9ec;border-radius:12px;background:#fff;margin-top:12px}
#flashEditor .flash-share summary{color:#133b74;font-size:13px}
#flashEditor .flash-linkbox input{min-height:42px;border:2px solid #91b5e6;background:#f9fcff;color:#17355a;font-size:13px}
#flashEditor #flashQRImage canvas{width:min(100%,340px)}
#flashEditor .flash-qr-review-note{font-size:10px!important;font-weight:800;color:#645022;background:#fff3c8;border:1px solid #ead78f;border-radius:7px;display:inline-block;padding:4px 7px;margin:0 0 8px}
#flashEditor .flash-share-jump{display:none}
@media(hover:hover) and (pointer:fine){#flashBuilderView .flash-library-card:hover{transform:translateY(-5px) rotate(-.6deg);box-shadow:0 6px 0 color-mix(in srgb,var(--tile-accent) 75%,white),0 13px 20px #15387225}#flashBuilderView .flash-library-card:nth-child(even):hover{transform:translateY(-5px) rotate(.6deg)}}
@media(max-width:1050px){#flashBuilderView .flash-hero-cheer{display:none}}
@media(max-width:620px){
 #flashBuilderView .flash-library-top{margin:-17px -13px 12px;padding:15px 13px 13px;gap:10px;border-bottom-width:4px}
 #flashBuilderView .flash-step-label{font-size:9px;margin-bottom:6px;padding:3px 8px}
 #flashBuilderView .flash-library h1{font-size:28px}
 #flashBuilderView .flash-library h2{font-size:21px;margin-bottom:6px}
 #flashBuilderView .flash-library-top p{font-size:12px;max-width:none}
 #flashBuilderView .flash-topic-box{background:transparent;border:0;box-shadow:none;transform:none;padding:0}
 #flashBuilderView .flash-topic-box label{color:#ecf5ff;font-size:11px}
 #flashBuilderView .flash-topic-box input{font-size:13px;min-height:41px;border:2px solid #aacfff}
 #flashBuilderView .flash-create-row{padding-bottom:9px;gap:6px;margin-bottom:11px}
 #flashEditor .flash-share-jump{display:block;position:absolute;right:0;top:0;border:1px solid #a5bce0;border-radius:10px;background:#edf5ff;color:#133b74;font:inherit;font-size:11px;font-weight:800;min-height:38px;padding:8px 10px;cursor:pointer}
 #flashEditor .flash-share{scroll-margin-top:14px}
 #flashEditor .flash-share details{padding:9px}
 #flashEditor .flash-linkbox input{font-size:14px}
}
@media(max-width:360px){
 #flashBuilderView .flash-step-label{display:none}
 #flashBuilderView .flash-library h1{font-size:24px;letter-spacing:-.04em}
 #flashBuilderView .flash-library h2{font-size:19px}
 #flashBuilderView .flash-create-row button{font-size:10px;padding:7px 5px;min-height:44px}
}
@media(prefers-reduced-motion:reduce){#flashBuilderView .flash-library-card:hover,#flashBuilderView .flash-library-card:nth-child(even):hover{transform:none!important}}
/* Keep link access obvious whenever the editor stacks, including tablets. */
@media(min-width:621px) and (max-width:850px){
 #flashEditor .flash-share-jump{display:block;float:right;margin-right:8px;border:1px solid #a5bce0;border-radius:10px;background:#edf5ff;color:#133b74;font:inherit;font-size:12px;font-weight:800;min-height:38px;padding:8px 10px;cursor:pointer}
}