/* Shared learning language: stable semantic colors across explanations and play. */
:root{
 --syntax-noun-ink:#23539b;--syntax-noun-bg:#edf4ff;--syntax-noun-border:#91b3e5;
 --syntax-particle-ink:#824900;--syntax-particle-bg:#fff1cd;--syntax-particle-border:#ca8a18;
 --syntax-verb-ink:#9b3155;--syntax-verb-bg:#fff0f4;--syntax-verb-border:#d68aa4;
 --syntax-context-ink:#286346;--syntax-context-bg:#edf8ef;--syntax-context-border:#8ab69b;
 --syntax-neutral-ink:#586150;--syntax-neutral-bg:#f4f5f0;--syntax-neutral-border:#c9d0c0;
 --ink:#2b3931;--muted:#667360;--line:#dfe5da;--green:#466c50;
 --ui-radius:15px;--ui-focus:#9b6713;
}
[data-syntax-role]{--syntax-ink:var(--syntax-neutral-ink);--syntax-bg:var(--syntax-neutral-bg);--syntax-border:var(--syntax-neutral-border)}
[data-syntax-role=noun]{--syntax-ink:var(--syntax-noun-ink);--syntax-bg:var(--syntax-noun-bg);--syntax-border:var(--syntax-noun-border)}
[data-syntax-role=particle]{--syntax-ink:var(--syntax-particle-ink);--syntax-bg:var(--syntax-particle-bg);--syntax-border:var(--syntax-particle-border)}
[data-syntax-role=verb]{--syntax-ink:var(--syntax-verb-ink);--syntax-bg:var(--syntax-verb-bg);--syntax-border:var(--syntax-verb-border)}
[data-syntax-role=context]{--syntax-ink:var(--syntax-context-ink);--syntax-bg:var(--syntax-context-bg);--syntax-border:var(--syntax-context-border)}
.syntax-legend{display:flex;align-items:center;justify-content:space-between;gap:17px;padding:17px 19px;margin:0 0 22px;border:1px solid #dfe6d8;border-radius:13px;background:#f4f7ef}
.syntax-legend-copy{min-width:0}.syntax-legend strong{font-size:12px;color:#4b6640}.syntax-legend p{font-size:11px;line-height:1.8;color:#6a7c60;margin-top:3px;max-width:450px}.syntax-legend>div:last-child{display:flex;flex-wrap:wrap;gap:7px;flex-shrink:0;max-width:53%}
.syntax-key{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--syntax-border);border-radius:7px;padding:6px 9px;background:var(--syntax-bg);color:var(--syntax-ink);font-size:10px;font-weight:600;line-height:1.6}
.syntax-key>i{height:7px;width:7px;border-radius:2px;background:currentColor;flex-shrink:0}
.syntax-sentence,.syntax-pattern{display:flex;align-items:center;flex-wrap:wrap;gap:7px;min-width:0;max-width:100%;padding:4px 0}
.syntax-token{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;max-width:100%;min-width:38px;padding:11px 10px 7px;border:1px solid var(--syntax-border);border-radius:9px;background:var(--syntax-bg);color:var(--syntax-ink);vertical-align:middle}
.syntax-token[data-syntax-role=particle]{border-width:2px;padding:10px 9px 6px}
.syntax-token .syntax-token-text{color:var(--syntax-ink);font-size:20px;line-height:2;overflow-wrap:anywhere;max-width:100%;padding:0;letter-spacing:0}
.syntax-token>small{color:var(--syntax-ink);font:500 9px/1.55 var(--font);white-space:normal;text-align:center;max-width:100%}
.syntax-token ruby,.syntax-detail ruby{display:ruby;ruby-position:over;ruby-align:center}
.syntax-token rt,.syntax-detail rt{display:ruby-text;font-size:11px;color:inherit;line-height:1.3;font-weight:400;letter-spacing:0}
.syntax-token.is-pattern{padding:8px 9px 6px;min-width:0;gap:3px}.syntax-token.is-pattern .syntax-token-text{font:600 12px/1.8 var(--font),'Noto Sans JP',sans-serif}.syntax-token.is-pattern small{font-size:8px}
.syntax-connector,.syntax-punctuation{font-size:16px;color:#7b8973;align-self:center;flex-shrink:0}.syntax-punctuation{font-family:'Noto Sans JP',sans-serif}
.syntax-book-pattern{margin-top:10px;color:#6d7d62}.syntax-book-pattern>summary{font-size:10px;cursor:pointer;padding:5px 0}.syntax-book-pattern>p{font-size:13px;line-height:2;margin-top:5px;overflow-wrap:anywhere}
.grammar-card{border:1px solid #dce5d5;border-radius:var(--ui-radius);padding:24px;background:#fffefb;min-width:0}
.grammar-card .top{align-items:flex-start;gap:12px}.grammar-card .top h3{font-size:18px;line-height:1.65;color:#3e5a37}.grammar-card .top .tag{flex-shrink:0;font-size:9px;line-height:1.6}
.grammar-card .grammar-pattern{background:#f6f8f2;border:1px solid #e1e8da;border-radius:11px;padding:15px;margin-top:17px;color:#586b4a;font-family:var(--font);font-size:14px;line-height:1.8}
.grammar-card .pattern-caption,.grammar-card .example-caption{display:block;font-size:9px;letter-spacing:.7px;font-weight:600;color:#647e52;margin-bottom:9px}
.grammar-card>p{font-size:13px;line-height:1.95;color:#5e7053}.grammar-card .example-box{padding:16px 46px 16px 16px;margin-top:17px;border:1px solid #e1e7d8;border-radius:11px;background:#fffef8}
.grammar-card .syntax-token-text.jp{padding:0;color:var(--syntax-ink)}.grammar-card .translation{font-size:13px;line-height:1.9;color:#566e48;margin-top:13px}.grammar-card .romaji{font-size:11px;color:#6c7c61;line-height:1.9;margin-top:10px}
.grammar-card .tip{font-size:12px;line-height:1.9;color:#78623e;background:#fbf6e9;border:1px solid #e9ddbd;border-radius:8px;padding:11px 13px;margin-top:17px}.grammar-card .tip .icon{height:15px;width:15px;flex-shrink:0}.grammar-card .grammar-drill-action{gap:9px;flex-wrap:wrap;margin-top:17px}
.syntax-breakdown{margin-top:15px;border:1px solid #dfe6d7;border-radius:10px;background:#f8faf4}.syntax-breakdown>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;cursor:pointer;list-style:none;font-size:11px;font-weight:600;color:#557243}.syntax-breakdown>summary::-webkit-details-marker{display:none}.syntax-breakdown>summary>span{font-size:18px;line-height:1;font-weight:400}.syntax-breakdown[open]>summary>span{transform:rotate(45deg)}
.syntax-detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;padding:0 12px 12px}.syntax-detail{min-width:0;border:1px solid var(--syntax-border);border-radius:9px;background:var(--syntax-bg);color:var(--syntax-ink);padding:12px}.syntax-detail>small{font-size:9px;font-weight:600}.syntax-detail>p.jp{font-size:18px;line-height:2.3;overflow-wrap:anywhere;margin-top:3px}.syntax-detail>p:last-child{font-size:11px;line-height:1.9;margin-top:4px;color:var(--syntax-ink)}
.grammar-pocket{margin:0 0 28px}.grammar-pocket-head .eyebrow{font-size:9px;color:#75866b}.grammar-pocket-head h2{font-size:22px;margin:6px 0}.grammar-pocket-head>p{font-size:12px;color:#6b7c60;margin-bottom:16px}
.pocket-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:start;gap:12px}
.pocket-card{background:#fffefb;border:1px solid #dce5d4;border-radius:14px;min-width:0}.pocket-card[open]{grid-column:1/-1;border-color:#b6caa5}
.pocket-card>summary{display:flex;align-items:center;gap:11px;padding:19px 16px;cursor:pointer;list-style:none;min-height:115px}.pocket-card>summary::-webkit-details-marker{display:none}.pocket-card>summary>span:nth-child(2){min-width:0;flex:1}.pocket-card strong{font-size:13px;line-height:1.7;color:#4f6d40}.pocket-card summary small{display:block;font-size:11px;line-height:1.85;color:#6e8062;margin-top:5px}.pocket-card summary>b{font-size:20px;color:#7d936b;font-weight:400;flex-shrink:0}.pocket-card[open] summary>b{transform:rotate(45deg)}
.pocket-symbol{display:grid;place-items:center;font-family:'Noto Sans JP',sans-serif;font-size:25px;height:47px;width:42px;border:1px solid var(--syntax-border);border-radius:10px;background:var(--syntax-bg);color:var(--syntax-ink);flex-shrink:0}
.pocket-body{padding:0 18px 18px;border-top:1px solid #e6ebdf}.pocket-rule-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding-top:17px}.pocket-rule-grid>article{padding:17px;border:1px solid #e1e7d8;border-radius:11px;background:#f9fbf5;min-width:0}.pocket-rule-grid h3{font-size:13px;line-height:1.8;color:#4c6741}.pocket-rule-grid h3>span{display:inline-grid;place-items:center;min-width:29px;padding:1px 5px;margin-right:5px;border-radius:5px;background:var(--syntax-bg);color:var(--syntax-ink);border:1px solid var(--syntax-border);font-size:18px}.pocket-rule-grid p{font-size:12px;color:#6a7f5b;line-height:1.9;margin:7px 0 10px}.pocket-rule-grid .syntax-token .syntax-token-text{font-size:18px}.pocket-rule-grid .syntax-token small{font-size:8px}.pocket-note{font-size:11px;color:#708365;line-height:1.9;margin:17px 0 0}
.pocket-symbol-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px;padding-top:18px}.pocket-symbol-grid article{border:1px solid var(--syntax-border);background:var(--syntax-bg);color:var(--syntax-ink);border-radius:9px;padding:14px;min-width:0}.pocket-symbol-grid strong{color:var(--syntax-ink);font-size:20px}.pocket-symbol-grid strong>span{display:block;font-size:11px;margin-top:4px}.pocket-symbol-grid p{font-size:12px;line-height:1.9;overflow-wrap:anywhere;margin-top:8px}
/* Game pieces use the exact same colors as the teaching examples. */
.word-piece[data-syntax-role],.word-piece.placed[data-syntax-role],.lego-slot[data-syntax-role],.mini-lego [data-syntax-role]{color:var(--syntax-ink);background:var(--syntax-bg);border-color:var(--syntax-border);box-shadow:0 3px 0 var(--syntax-border)}
.word-piece[data-syntax-role]>small,.lego-slot[data-syntax-role]>small,.mini-lego [data-syntax-role]>small{color:var(--syntax-ink);font-size:10px;line-height:1.6;font-weight:600;text-transform:none}
.word-piece[data-syntax-role=particle],.lego-slot[data-syntax-role=particle]{border-width:2px}
.grammar-arcade>.syntax-legend{margin:0 22px 20px}.grammar-arcade .syntax-legend{flex-direction:column;align-items:flex-start}.grammar-arcade .syntax-legend>div:last-child{max-width:100%}.grammar-arcade .arcade-stage .syntax-legend{padding:13px;margin:0 0 15px}
.arcade-mascot{animation:none}.arcade-mode-tabs{scroll-snap-type:x proximity;overscroll-behavior-inline:contain;scroll-padding-inline:10px;scroll-behavior:smooth}.arcade-mode-tabs>button{scroll-snap-align:start;min-height:48px}.arcade-mode-tabs>button[aria-selected=true]{box-shadow:inset 0 0 0 1px #be875c}
.particle-options>button{border-color:var(--syntax-particle-border);color:var(--syntax-particle-ink);background:var(--syntax-particle-bg)}
.particle-card mark{background:var(--syntax-particle-bg);color:var(--syntax-particle-ink)}
/* Calm, readable common controls; no continuous decoration is needed to learn. */
.field,.select{border-color:#d1dbc8;border-radius:9px;background:#fffefb}.field::placeholder{color:#627357}.btn{border-radius:9px}.btn:focus-visible,summary:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid var(--ui-focus);outline-offset:3px}
.result-count,.content-note{color:#6e7c63}.grammar-card .icon-button{background:#edf3e6;border:1px solid #d9e3ce;color:#597a44}
@media(max-width:1100px){.pocket-grid{grid-template-columns:1fr}.pocket-card>summary{min-height:86px}.pocket-card[open]{grid-column:auto}.pocket-card strong{font-size:15px}.pocket-card summary small{font-size:12px}.syntax-legend{display:block}.syntax-legend>div:last-child{max-width:100%;margin-top:12px}.grammar-card{padding:21px}}
@media(max-width:760px){
 .grammar-grid{grid-template-columns:1fr}.syntax-legend{padding:15px;border-radius:11px}.syntax-legend p{font-size:11px}.syntax-key{font-size:10px;min-height:33px}.syntax-legend>div:last-child{gap:6px}
 .pocket-rule-grid{grid-template-columns:1fr}.pocket-symbol-grid{grid-template-columns:1fr 1fr}.pocket-card>summary{padding:16px}.pocket-card strong{font-size:14px}.pocket-body{padding:0 13px 14px}.pocket-rule-grid>article{padding:15px}
 .grammar-card .top h3{font-size:18px}.grammar-card .example-box{padding:15px 43px 15px 13px}.syntax-token{padding:9px 8px 6px}.syntax-token[data-syntax-role=particle]{padding:8px 7px 5px}.syntax-token .syntax-token-text{font-size:19px}.syntax-token>small{font-size:9px}.syntax-sentence{gap:6px}.syntax-token.is-pattern .syntax-token-text{font-size:12px}.syntax-pattern{gap:6px}
 .grammar-card .grammar-drill-action .btn{min-height:42px}.grammar-card .icon-button{min-width:38px;min-height:38px}.syntax-book-pattern>summary{min-height:34px}.syntax-breakdown>summary{min-height:44px}.syntax-detail>p.jp{font-size:17px}.syntax-detail>p:last-child{font-size:11px}
 .filters{gap:10px}.filters>.field{flex:1 1 240px;min-width:0}.filters>.select{max-width:100%;min-height:42px}.field,.select{min-height:42px}
 .arcade-mode-tabs{padding-bottom:9px}.arcade-mode-tabs>button{font-size:11px;min-height:58px;line-height:1.65;white-space:normal}.word-piece[data-syntax-role],.lego-slot[data-syntax-role]{min-height:61px;max-width:100%;overflow-wrap:anywhere}.word-piece[data-syntax-role]>small{font-size:10px}.grammar-arcade .arcade-stage{min-width:0}.builder-zone,.builder-bank{max-width:100%;flex-wrap:wrap}
 .study-word-table.table-wrap{overflow:visible;padding:0!important;border:0;background:transparent;box-shadow:none}
 .study-word-table table{display:block;width:100%;table-layout:auto}.study-word-table thead{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
 .study-word-table tbody{display:grid;gap:12px}.study-word-table tr{display:grid;grid-template-columns:minmax(0,1fr) 44px;align-items:center;gap:10px;padding:17px;border:1px solid #dce5d4;border-radius:12px;background:#fffefb;min-width:0}
 .study-word-table td,.daily-word-table.study-word-table td{display:block;border:0;padding:0;min-width:0;width:auto;overflow-wrap:anywhere}
 .study-word-table td:first-child{grid-column:1;grid-row:1}.study-word-table td:nth-child(2){grid-column:1/-1;grid-row:2;border-top:1px solid #e6ebdf;padding-top:11px;font-size:13px;line-height:1.9}
 .study-word-table td:nth-child(2)::before{content:attr(data-label);display:block;font:600 10px/1.7 var(--font);color:#708264;margin-bottom:4px}
 .study-word-table td:last-child,.daily-word-table.study-word-table td:last-child{grid-column:2;grid-row:1;padding:0;align-self:center;text-align:center}
 .study-word-table .icon-button{min-width:42px;min-height:42px;height:42px;font-size:21px}.study-word-table .reading{font-size:14px;line-height:1.9}.study-word-table .romaji{font-size:11px;line-height:1.9}
 .daily-word-table.study-word-table td>strong{font-size:14px;color:#526c43}.daily-word-table.study-word-table td>small{font-size:12px;line-height:1.9;color:#6b7e5e}.daily-word-table.study-word-table .daily-vocab-term{font-size:26px}.daily-word-table.study-word-table .daily-vocab-term.is-long{font-size:21px}
 .study-word-table tr.is-target{background:#f1f6e9;box-shadow:inset 3px 0 0 #89a874}.daily-word-table.study-word-table tr.is-target td:first-child{border:0}
 .lesson-detail-side .section-head{gap:12px;align-items:flex-start}.lesson-detail-side .section-head h2{font-size:18px}.lesson-detail-side .section-head>.btn{min-height:40px;flex-shrink:0}
}
@media(max-width:450px){.grammar-card{padding:17px}.grammar-card .top{gap:9px}.grammar-card .top h3{font-size:17px}.grammar-card .top .tag{font-size:8px}.grammar-card .grammar-pattern{padding:12px}.grammar-card .example-box{padding-right:39px}.syntax-token .syntax-token-text{font-size:18px}.syntax-token{min-width:32px;padding:8px 7px 5px}.syntax-token[data-syntax-role=particle]{padding:7px 6px 4px}.syntax-token>small{font-size:8px}.syntax-detail-grid{grid-template-columns:1fr 1fr;gap:7px;padding:0 9px 9px}.syntax-detail{padding:10px}.syntax-detail>small{font-size:9px}.syntax-detail>p.jp{font-size:16px}.pocket-symbol{width:36px;height:43px;font-size:24px}.pocket-card>summary{gap:10px;padding:15px}.pocket-card strong{font-size:13px}.pocket-card summary small{font-size:11px}.syntax-key{font-size:9px}.study-word-table tr{padding:15px}}
@media(prefers-reduced-motion:reduce){.syntax-breakdown *,.pocket-card *,.arcade-mode-tabs,.word-piece{scroll-behavior:auto!important;animation:none!important;transition:none!important}}

.syntax-pattern-note{font:500 11px/1.8 var(--font);color:#647357;padding:5px 3px;overflow-wrap:anywhere;max-width:100%}

/* Labels remain readable without depending on color alone. */
.syntax-token>small{font-size:10px}.syntax-token.is-pattern small{font-size:9px}
@media(max-width:760px){.syntax-token>small{font-size:10px}.syntax-token.is-pattern small{font-size:9px}}
.syntax-connector,.syntax-punctuation{color:#647457}

.grammar-catalog{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:18px}
@media(max-width:1100px){.grammar-catalog{grid-template-columns:1fr}}