/* Layout: 黒板の前の机。左に反抗期の電卓、右に宿題プリント。スマホでは縦に積む */
:root{
  --board:#1f3a2f;      /* 黒板 */
  --chalk:#eef3ea;
  --body:#2a2c32;       /* 電卓本体 */
  --body2:#3a3d45;
  --key:#e9e9ec; --keyink:#1e1f24;
  --op:#f08a24;         /* 演算キーの橙 */
  --lcd:#c5d2b2; --lcdink:#1f2a1a;
  --paper:#fcfcfa; --paperink:#222; --rule:#cfd6e0;
  --red:#d6262e;        /* 先生の赤ペン */
  --f-ui:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Yu Gothic",system-ui,sans-serif;
  --f-lcd:"DotGothic16","MS Gothic",monospace;
  --f-hand:"Yomogi","Hiragino Maru Gothic ProN",cursive;
  color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:var(--board);color:var(--chalk);font-family:var(--f-ui);line-height:1.6;
  background-image:radial-gradient(ellipse at 30% 20%,rgba(255,255,255,.06),transparent 60%),radial-gradient(ellipse at 80% 70%,rgba(255,255,255,.04),transparent 50%)}
.wrap{max-width:1000px;margin:0 auto;padding-inline:16px;padding-block:14px 40px;display:grid;gap:18px}
.top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.top a{color:rgba(238,243,234,.7);text-decoration:none;font-size:.9rem}
.top a:hover{color:var(--chalk)}
h1{margin:0;font-family:var(--f-hand);font-weight:400;font-size:clamp(2rem,6vw,3rem);letter-spacing:.06em;line-height:1.2}
h1 small{display:block;font-size:.4em;opacity:.8;letter-spacing:.02em}
.desk{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;align-items:start}
@media (max-width:800px){.desk{grid-template-columns:1fr}}
/* 電卓 */
.calcwrap{position:relative;display:grid;justify-items:center;padding-top:96px}
#bubble{position:absolute;top:0;left:50%;translate:-50% 0;width:min(360px,100%);min-height:76px;background:#fff;color:#222;border-radius:16px;padding:10px 14px;font-weight:700;display:flex;gap:10px;align-items:center;box-shadow:0 8px 20px rgba(0,0,0,.3);z-index:3;transition:opacity .2s}
#bubble::after{content:"";position:absolute;left:50%;bottom:-14px;translate:-50% 0;border:8px solid transparent;border-top-color:#fff}
#bubble.quiet{opacity:0}
#who{flex:none;width:36px;height:36px;border-radius:50%;background:var(--body);color:#fff;display:grid;place-items:center;font-family:var(--f-lcd);font-size:1.1rem}
#say{flex:1;min-width:0;white-space:pre-line}
#say .q{display:flex;gap:8px;margin-top:6px}
#say .q button{font:inherit;font-weight:900;border:2px solid #222;background:#fff;border-radius:8px;padding:2px 14px;cursor:pointer}
#say .q button:hover{background:#ffe9b8}
.calc{width:min(340px,100%);background:linear-gradient(160deg,var(--body2),var(--body));border-radius:22px;padding:16px 16px 20px;box-shadow:0 2px 0 #4a4d55 inset,0 24px 50px rgba(0,0,0,.45);display:grid;gap:12px;transition:transform 1.2s cubic-bezier(.6,-.3,.6,1.2),opacity 1s}
.calc.away{transform:translateX(130vw) rotate(25deg);opacity:0}
.calc.nap{filter:brightness(.65)}
.brandrow{display:flex;justify-content:space-between;align-items:center;color:#c9cbd2;font-size:.78rem;letter-spacing:.1em}
.brandrow b{font-family:var(--f-lcd);font-weight:400;font-size:1rem;color:#fff}
.solar{width:84px;height:18px;border-radius:3px;background:repeating-linear-gradient(90deg,#3b2a1e 0 13px,#2a1d14 13px 14px);border:2px solid #1a1b1f}
.lcd{background:var(--lcd);color:var(--lcdink);border-radius:8px;padding:8px 12px;font-family:var(--f-lcd);box-shadow:inset 0 3px 6px rgba(0,0,0,.35);display:grid;gap:2px;min-height:118px}
.lcdtop{display:flex;justify-content:space-between;font-size:.82rem}
#expr{font-size:.95rem;text-align:right;min-height:1.4em;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;opacity:.75}
#val{font-size:2.3rem;text-align:right;line-height:1.1;overflow:hidden;white-space:nowrap;font-variant-numeric:tabular-nums}
#val.small{font-size:1.25rem;white-space:normal;line-height:1.4}
.keys{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}
.keys button{position:relative;font-family:var(--f-lcd);font-size:1.4rem;height:54px;border:0;border-radius:12px;background:var(--key);color:var(--keyink);box-shadow:0 4px 0 #a9aab2;cursor:pointer;transition:transform .2s,background .2s;touch-action:manipulation;user-select:none;-webkit-user-select:none}
.keys button:active{transform:translateY(3px);box-shadow:0 1px 0 #a9aab2}
.keys button:focus-visible{outline:3px solid var(--op);outline-offset:2px}
.keys .op{background:var(--op);color:#fff;box-shadow:0 4px 0 #a85a12}
.keys .fn{background:#8e919b;color:#fff;box-shadow:0 4px 0 #5d6068}
.keys .eq{background:#3b7be0;color:#fff;box-shadow:0 4px 0 #23519c}
.keys .tired{transform:translateY(6px) rotate(-8deg);background:#d9d2c8}
.keys .sleep{transform:rotate(90deg);background:#c9d4ea}
.keys .shy{background:#d7d7de;color:#888}
.keys .brave{background:#fff4c2;box-shadow:0 4px 0 #d9b23c}
.keys .mini{position:absolute;right:5px;top:2px;font-size:.62rem;font-family:var(--f-ui);font-weight:700;color:#666}
.care{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.care button{font-family:var(--f-ui);font-weight:700;font-size:.85rem;border-radius:999px;border:2px solid #c9cbd2;background:transparent;color:#fff;padding:7px 4px;cursor:pointer}
.care button:hover:not(:disabled){background:rgba(255,255,255,.1)}
.care button:disabled{opacity:.4;cursor:default}
#fetch{margin-top:18px;font-family:var(--f-ui);font-weight:900;font-size:1.05rem;border:2px dashed var(--chalk);background:transparent;color:var(--chalk);border-radius:12px;padding:14px 22px;cursor:pointer}
.hint{font-size:.85rem;color:rgba(238,243,234,.75);text-align:center;margin:0}
/* 宿題プリント */
.sheet{background:var(--paper);color:var(--paperink);border-radius:4px;padding:22px 22px 26px;box-shadow:0 20px 40px rgba(0,0,0,.35);transform:rotate(.6deg);display:grid;gap:12px;position:relative}
.sheet h2{margin:0;font-weight:900;font-size:1.3rem;letter-spacing:.2em;text-align:center;border-bottom:3px double var(--paperink);padding-bottom:6px}
.namerow{display:flex;justify-content:space-between;font-size:.9rem;gap:8px;flex-wrap:wrap}
.namerow span:last-child{border-bottom:1px solid var(--paperink);min-width:9em}
.sheet p{margin:0;font-size:.92rem}
.qs{list-style:none;margin:0;padding:0;display:grid}
.qs li{display:grid;grid-template-columns:2.4em minmax(0,1fr) 5.5em 2.4em;align-items:center;gap:6px;padding:8px 0;border-bottom:1px solid var(--rule);font-size:1.15rem;font-variant-numeric:tabular-nums}
.qs .n{font-size:.85rem;color:#666}
.qs .ans{border:1.5px solid #555;border-radius:4px;height:2em;display:grid;place-items:center;font-family:var(--f-hand);font-size:1.3rem;color:#1a3fbf}
.qs .mark{font-family:var(--f-hand);color:var(--red);font-size:1.7rem;line-height:1;text-align:center}
.qs li.bonus{grid-template-columns:3.6em minmax(0,1fr) 2.4em;font-size:.95rem}
.qs li.bonus .ans{display:none}
.score{display:flex;justify-content:space-between;align-items:center;font-size:.95rem}
.score b{font-size:1.4rem}
.tabs{display:flex;gap:6px;flex-wrap:wrap}
.tabs button{font:inherit;font-weight:700;font-size:.85rem;border:1.5px solid #555;background:#fff;color:#333;border-radius:999px;padding:3px 12px;cursor:pointer}
.tabs button.on{background:var(--paperink);color:#fff;border-color:var(--paperink)}
.tabs button.fin::after{content:" ◎";color:var(--red)}
.tabs button.on.fin::after{color:#ff9a9e}
.qs li.story{font-size:.95rem;line-height:1.55}
.testbar{display:flex;justify-content:space-between;align-items:center;gap:10px;background:#fff4e0;border:1.5px solid #e0b060;border-radius:8px;padding:8px 12px}
.testbar button{font:inherit;font-weight:900;border:2px solid var(--paperink);background:#fff;border-radius:8px;padding:4px 14px;cursor:pointer}
.testbar b{font-size:1.3rem;font-variant-numeric:tabular-nums;color:var(--red)}
.stamp{position:absolute;right:20px;top:80px;width:110px;height:110px;border:5px solid var(--red);border-radius:50%;color:var(--red);display:grid;place-items:center;font-size:2rem;font-weight:900;transform:rotate(-14deg);opacity:.85;letter-spacing:.1em;pointer-events:none}
.hanamaru{position:absolute;right:14px;top:56px;width:120px;height:120px;pointer-events:none;opacity:0;transform:scale(.4) rotate(-20deg);transition:all .6s cubic-bezier(.2,1.6,.4,1)}
.hanamaru.on{opacity:1;transform:scale(1) rotate(-8deg)}
.cert{position:fixed;inset:0;z-index:30;background:rgba(0,0,0,.6);display:grid;place-items:center;padding:16px}
.cert>div{background:var(--paper);color:var(--paperink);max-width:440px;width:100%;padding:28px;border:6px double #b08a2a;text-align:center;display:grid;gap:10px}
.cert h3{margin:0;font-size:1.8rem;letter-spacing:.3em}
.cert p{margin:0}
.cert button{justify-self:center;font:inherit;font-weight:900;border:2px solid var(--paperink);background:#fff;border-radius:8px;padding:8px 18px;cursor:pointer}
@media (prefers-reduced-motion:reduce){.calc,.keys button,.hanamaru{transition:none}}