:root{
  --sky:#7ed7ff;
  --sky2:#c9f1ff;
  --cream:#fff8df;
  --ink:#24445b;
  --blue:#3ba8f5;
  --green:#58ca8a;
  --orange:#ffae52;
  --yellow:#ffd95b;
  --pink:#ff91b7;
  --red:#ff6f75;
  --purple:#9c86f3;
  --card:#ffffff;
  --shadow:0 10px 28px rgba(42,95,125,.18);
  --safe-top:max(10px,env(safe-area-inset-top));
  --safe-bottom:max(10px,env(safe-area-inset-bottom));
  --safe-left:max(10px,env(safe-area-inset-left));
  --safe-right:max(10px,env(safe-area-inset-right));
}
*{box-sizing:border-box;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
html,body{width:100%;height:100%;margin:0;overflow:hidden;overscroll-behavior:none;background:var(--sky2);touch-action:none;font-family:"Hiragino Maru Gothic ProN","Yu Gothic","Meiryo",system-ui,sans-serif;color:var(--ink)}
button,input{font:inherit}
button{border:0;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
button:active{transform:scale(.96)}
.hidden{display:none!important}
#orientation-lock{display:none;position:fixed;inset:0;z-index:99999;background:linear-gradient(145deg,#8fe0ff,#fff6c9);align-items:center;justify-content:center;padding:24px}
.rotate-card{background:white;border-radius:36px;padding:28px 34px;text-align:center;box-shadow:var(--shadow);max-width:520px}
.rotate-icon{font-size:76px}.rotate-card h1{font-size:clamp(34px,6vw,60px);margin:8px}.rotate-card p{font-size:clamp(18px,3vw,28px);font-weight:800}
@media (orientation:portrait) and (max-width:900px){#orientation-lock{display:flex}}
.app-shell{position:fixed;inset:0;padding:var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left);background:
radial-gradient(circle at 10% 20%,rgba(255,255,255,.75) 0 4%,transparent 4.3%),
radial-gradient(circle at 92% 16%,rgba(255,255,255,.62) 0 3.2%,transparent 3.5%),
linear-gradient(180deg,#8fddff 0%,#d8f5ff 55%,#fff6d7 100%)}
.topbar{height:82px;display:grid;grid-template-columns:180px 1fr 180px;align-items:center;gap:12px;position:relative;z-index:30}
.screen-title{text-align:center;font-weight:1000;font-size:clamp(26px,4vw,44px);text-shadow:0 3px 0 rgba(255,255,255,.7)}
.pill-btn,.round-btn,.big-action,.tool-btn,.mode-card,.category-btn,.item-card,.color-dot,.size-btn{
  box-shadow:0 6px 0 rgba(30,75,100,.13),var(--shadow);font-weight:1000;color:var(--ink)
}
.pill-btn{height:58px;border-radius:22px;background:white;font-size:22px;padding:0 22px}
.round-btn{background:white;border-radius:22px;min-height:62px;padding:7px 18px;font-size:28px;display:flex;align-items:center;justify-content:center;gap:8px}
.round-btn span{font-size:18px}.round-btn.small{min-height:48px;min-width:48px;padding:6px}
.speak-btn{justify-self:end;background:#fff4a7}
.screen{height:calc(100% - 82px);position:relative;display:flex;flex-direction:column;min-height:0}
.home-wrap{height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:18px;padding:10px 8vw 26px}
.logo{font-size:clamp(38px,5.4vw,68px);font-weight:1000;color:#1f668c;text-shadow:0 4px 0 #fff;margin-bottom:4px}
.logo-sub{font-size:clamp(16px,2vw,24px);font-weight:900;background:#fff8be;border-radius:999px;padding:8px 22px}
.home-grid{width:min(1180px,92vw);display:grid;grid-template-columns:repeat(6,1fr);gap:18px}
.mode-card{min-height:150px;border-radius:32px;background:white;padding:14px 10px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;border:5px solid rgba(255,255,255,.9)}
.mode-card:nth-child(1){grid-column:span 2;background:#fff8b8}.mode-card:nth-child(2){grid-column:span 2;background:#dff9c6}.mode-card:nth-child(3){grid-column:span 2;background:#d9f0ff}.mode-card:nth-child(4){grid-column:2/span 2;background:#ffdce8}.mode-card:nth-child(5){grid-column:4/span 2;background:#eee5ff}
.mode-icon{font-size:64px}.mode-label{font-size:30px}
.adult-btn{position:absolute;right:calc(var(--safe-right) + 12px);bottom:calc(var(--safe-bottom) + 8px);z-index:40;border-radius:18px;padding:10px 14px;background:rgba(255,255,255,.78);color:#547184;font-size:14px;font-weight:900}
.adult-btn span{font-size:14px}
.tracer-layout{height:100%;display:grid;grid-template-columns:1fr;grid-template-rows:1fr 82px;gap:10px;min-height:0}
.canvas-card{position:relative;min-height:0;margin:4px auto;width:min(100%,1100px);border-radius:30px;background:#fff;box-shadow:var(--shadow);overflow:hidden;border:5px solid rgba(255,255,255,.9)}
.canvas-card canvas{width:100%;height:100%;display:block;touch-action:none}
.helper-badge{position:absolute;left:16px;top:14px;background:#fff3a9;border-radius:18px;padding:9px 15px;font-weight:1000;font-size:18px;pointer-events:none}
.bottom-actions{display:flex;align-items:center;justify-content:center;gap:14px}
.big-action{min-width:170px;min-height:62px;border-radius:22px;padding:10px 22px;font-size:23px}
.big-action.primary{background:#72d999}.big-action.secondary{background:white}.big-action.danger{background:#ff9ba0}.big-action.orange{background:#ffc06b}
.progress-mini{font-size:18px;font-weight:1000;background:white;padding:9px 15px;border-radius:999px}
.library-layout{height:100%;display:grid;grid-template-rows:64px 1fr;gap:10px;min-height:0}
.categories{display:flex;gap:10px;overflow-x:auto;padding:4px 6px 8px;touch-action:pan-x}
.category-btn{flex:0 0 auto;border-radius:20px;background:white;min-width:120px;padding:8px 18px;font-size:19px}
.category-btn.active{background:#ffe27d;outline:4px solid rgba(255,255,255,.8)}
.item-grid{overflow:auto;touch-action:pan-y;overscroll-behavior:contain;display:grid;grid-template-columns:repeat(4,minmax(150px,1fr));gap:14px;padding:4px 12px 18px}
.item-card{border-radius:26px;background:white;padding:10px;min-height:150px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}
.item-card .thumb{width:100%;height:95px;border-radius:18px;background:#f8fcff;display:flex;align-items:center;justify-content:center;font-size:70px}
.item-name{font-size:21px}
.coloring-layout,.notebook-layout{height:100%;display:grid;grid-template-rows:1fr auto;gap:8px;min-height:0}
.drawing-zone{min-height:0;display:grid;grid-template-columns:1fr 250px;gap:10px}
.palette-panel{background:rgba(255,255,255,.9);border-radius:26px;padding:12px;box-shadow:var(--shadow);overflow:auto;touch-action:pan-y}
.panel-title{font-size:18px;font-weight:1000;text-align:center;margin-bottom:8px}
.palette{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.color-dot{aspect-ratio:1;border-radius:50%;border:5px solid white;position:relative}
.color-dot.active{outline:5px solid #2e6687}
.rainbow{background:conic-gradient(#ff5a5f,#ffb34d,#ffe250,#5dd67d,#4bb7ff,#a279ef,#ff7db4,#ff5a5f)}
.tool-stack{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.tool-btn,.size-btn{border-radius:17px;background:white;padding:10px 8px;font-size:16px;min-height:50px}
.tool-btn.active,.size-btn.active{background:#fff1a8;outline:3px solid #ffd24d}
.toolbar-bottom{display:flex;gap:9px;align-items:center;justify-content:center;flex-wrap:wrap;padding-bottom:2px}
.notebook-layout .drawing-zone{grid-template-columns:1fr 275px}
.modal{position:fixed;inset:0;background:rgba(25,55,72,.55);z-index:500;display:flex;align-items:center;justify-content:center;padding:20px}
.modal-card{width:min(760px,94vw);max-height:92vh;overflow:auto;touch-action:pan-y;background:#fffdf4;border-radius:34px;padding:22px;box-shadow:0 20px 80px rgba(0,0,0,.25)}
.modal-head{display:flex;justify-content:space-between;align-items:center}.modal-head h2{margin:0;font-size:32px}
.setting-block{display:block;background:white;border-radius:20px;padding:14px;margin:12px 0;font-weight:1000;font-size:21px}
.setting-block input[type=text],.setting-block input{width:100%;margin-top:10px;border:3px solid #cde8f7;border-radius:16px;font-size:28px;padding:12px;user-select:text;-webkit-user-select:text;touch-action:manipulation}
.segmented{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}.segmented button{padding:12px;border-radius:14px;background:#edf7fb;font-weight:900}.segmented button.active{background:#ffe27a}
.setting-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.toggle-row{display:flex;align-items:center;justify-content:space-between;background:white;border-radius:18px;padding:14px;font-weight:1000}.toggle-row input{width:26px;height:26px}
.settings-actions{display:flex;justify-content:center;gap:12px;margin-top:16px}.settings-note{text-align:center;color:#678;font-size:13px}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(120px);z-index:1000;background:#284d64;color:white;font-weight:900;border-radius:999px;padding:12px 22px;transition:.25s;pointer-events:none}.toast.show{transform:translateX(-50%) translateY(0)}
.success-overlay{position:fixed;inset:0;z-index:300;background:rgba(98,202,255,.35);display:flex;align-items:center;justify-content:center;backdrop-filter:blur(5px)}
.success-card{background:white;border-radius:38px;padding:18px 34px 24px;text-align:center;box-shadow:0 18px 70px rgba(25,80,110,.25);animation:pop .34s ease}
.hanamaru{font-size:104px;animation:bounce .7s ease}.success-word{font-size:42px;font-weight:1000}.sparkles{font-size:30px;letter-spacing:8px}.success-actions{display:flex;gap:14px;margin-top:14px}
@keyframes pop{from{transform:scale(.65);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes bounce{50%{transform:scale(1.16) rotate(-4deg)}}
@media(max-height:650px){.topbar{height:68px}.screen{height:calc(100% - 68px)}.mode-card{min-height:120px}.mode-icon{font-size:50px}.mode-label{font-size:24px}.home-wrap{gap:8px}.logo{font-size:42px}.canvas-card{border-radius:22px}}
@media(max-width:800px){.topbar{grid-template-columns:140px 1fr 140px}.pill-btn{font-size:18px}.item-grid{grid-template-columns:repeat(3,1fr)}.drawing-zone,.notebook-layout .drawing-zone{grid-template-columns:1fr 210px}.palette{grid-template-columns:repeat(2,1fr)}}


/* v1.1 こども向け視認性アップ */
.big-action.judge{
  background:linear-gradient(180deg,#ffe96b,#ffc94f);
  outline:4px solid rgba(255,255,255,.88);
  min-width:185px;
}
.item-card{
  background:linear-gradient(180deg,#ffffff,#f7fcff);
  border:4px solid rgba(255,255,255,.92);
  position:relative;
  overflow:hidden;
}
.item-card::before{
  content:"";
  position:absolute;
  inset:auto -18px -18px auto;
  width:70px;height:70px;border-radius:50%;
  background:rgba(126,215,255,.15);
}
.item-card .thumb{
  position:relative;
  background:linear-gradient(180deg,#fffdf4,#eefaff);
  border:3px solid rgba(117,190,225,.20);
  font-size:66px;
}
.thumb-sparkle{
  position:absolute;
  right:10px;
  top:6px;
  font-size:19px;
}
.item-name{
  font-size:22px;
  font-weight:1000;
}
.item-hint{
  font-size:14px;
  font-weight:900;
  color:#6c8da0;
  background:#eef9ff;
  border-radius:999px;
  padding:5px 10px;
}
.canvas-card{
  background:linear-gradient(180deg,#ffffff,#fffef7);
}
.helper-badge{
  background:linear-gradient(180deg,#fff7b8,#fff0a1);
  border:3px solid rgba(255,255,255,.85);
}


/* v1.2 アニメ調・ポップ化 */
.item-card{border:5px solid #fff;box-shadow:0 7px 0 rgba(58,113,142,.12),0 14px 30px rgba(61,128,163,.15)}
.item-card:nth-child(3n+1){background:linear-gradient(180deg,#fff,#fff2f7)}
.item-card:nth-child(3n+2){background:linear-gradient(180deg,#fff,#effbff)}
.item-card:nth-child(3n){background:linear-gradient(180deg,#fff,#fff9df)}
.item-card .thumb{height:104px;font-size:72px;border-radius:24px;background:radial-gradient(circle at 50% 35%,#fff 0 35%,#eefaff 72%,#e5f7ff 100%)}
.item-card:hover{transform:translateY(-2px)}
.cute-canvas{border:6px solid rgba(255,255,255,.96);box-shadow:0 12px 0 rgba(90,170,202,.10),0 16px 36px rgba(51,119,151,.18)}
.big-action.judge{font-size:24px;background:linear-gradient(180deg,#fff07b,#ffd45f);box-shadow:0 7px 0 #e8b943,0 12px 24px rgba(174,126,31,.18)}
.success-card{background:linear-gradient(180deg,#fff,#fff9dc);border:6px solid #fff}
.success-word{color:#316d8c;text-shadow:0 3px 0 #fff}

.thumb-image{padding:4px}
.thumb-photo{width:100%;height:100%;object-fit:contain;border-radius:14px;display:block}
.thumb-image .thumb-sparkle{background:rgba(255,255,255,.82);border-radius:999px;padding:2px 6px}


/* Ver.1.9: 白背景固定 + 差し替え画像の背景/輪郭を分離 */
.custom-guide-card{position:relative;background:#fff!important;overflow:hidden}
.canvas-reference{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  background:#fff;
  z-index:1;
  pointer-events:none;
  user-select:none;
  -webkit-user-drag:none;
}
.canvas-outline{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  background:transparent;
  z-index:3;
  pointer-events:none;
  user-select:none;
  -webkit-user-drag:none;
}
.custom-guide-card canvas{
  position:relative;
  z-index:2;
  background:transparent!important;
  touch-action:none!important;
  pointer-events:auto!important;
}
.custom-guide-card .helper-badge{z-index:5}
.single-tool{grid-template-columns:1fr}




/* Ver.1.10: UI見やすさアップ + ぬりえ色まぜ */
.screen-title{
  letter-spacing:.06em;
  color:#214b67;
}
.home-wrap{gap:20px}
.logo{display:flex;align-items:center;justify-content:center;gap:10px}
.logo-sub{font-size:clamp(16px,2vw,24px);font-weight:1000;background:linear-gradient(180deg,#fff8be,#fff2a8);box-shadow:0 6px 0 rgba(67,109,140,.12)}
.mode-card{gap:8px;padding:16px 12px 14px}
.mode-art{width:100%;display:flex;align-items:center;justify-content:center;position:relative;min-height:78px}
.mode-art-double{gap:0}
.mode-thumb{width:88px;height:88px;object-fit:contain;border-radius:24px;background:rgba(255,255,255,.78);box-shadow:0 8px 18px rgba(78,136,171,.18);padding:6px}
.mode-thumb.second{margin-left:-12px;transform:translateY(8px) rotate(6deg)}
.mode-art-bubbles{gap:10px}
.letter-bubble,.tool-bubble{display:inline-flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:20px;background:#fff;box-shadow:0 8px 18px rgba(78,136,171,.18);font-size:34px;font-weight:1000;color:#275b79}
.letter-bubble.small{font-size:28px;background:#fff7c8}
.letter-bubble.accent{background:#ffe0ee}
.tool-bubble:nth-child(2){background:#e7f8ff}
.tool-bubble:nth-child(3){background:#fff4be}
.mode-label{font-size:30px;line-height:1.05}
.mode-sub{font-size:16px;font-weight:900;color:#58758a;background:rgba(255,255,255,.72);padding:5px 12px;border-radius:999px}
.mode-card.mode-trace{background:linear-gradient(180deg,#ebf8ff,#dff2ff)}
.mode-card.mode-color{background:linear-gradient(180deg,#fff8c8,#ffefb2)}
.mode-card.mode-kana{background:linear-gradient(180deg,#f6efff,#ece2ff)}
.mode-card.mode-name{background:linear-gradient(180deg,#ffe4ef,#ffd8e7)}
.mode-card.mode-note{background:linear-gradient(180deg,#e8fbdf,#dcf7d0)}
.helper-badge{display:flex;align-items:center;gap:8px;font-size:19px;box-shadow:0 4px 0 rgba(75,123,148,.10)}
.helper-badge-paint{background:linear-gradient(180deg,#ffd86c,#ffc85c)}
.palette-panel{background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(251,254,255,.92));border:4px solid rgba(255,255,255,.92)}
.panel-title{font-size:20px;color:#2d5f7d}
.tool-btn,.size-btn{font-size:17px}
.color-dot{box-shadow:inset 0 0 0 2px rgba(36,68,91,.08)}
.color-dot[style*="#ffffff"]{background:#fff!important;border-color:#dbeaf3}
.canvas-card{background:#fff}


/* Ver.1.11 名前設定・画像安定化 */
.adult-btn{font-size:17px;padding:12px 18px;background:#fff;box-shadow:0 6px 0 rgba(43,94,122,.13),0 10px 24px rgba(42,95,125,.18)}
.adult-btn span{font-size:17px}.thumb-image{position:relative}.thumb-photo{position:relative;z-index:2;background:#fff}.thumb-fallback{position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center;font-size:62px}.thumb-fallback.standalone{position:static;width:100%;height:100%}
.name-setup-empty{height:100%;display:flex;align-items:center;justify-content:center;padding:24px}.name-setup-card{width:min(720px,88vw);background:#fff;border-radius:38px;padding:34px;text-align:center;box-shadow:var(--shadow);border:6px solid rgba(255,255,255,.92)}.name-setup-icon{font-size:72px}.name-setup-title{font-size:34px;font-weight:1000;margin:8px 0;color:#285c78}.name-setup-sub{font-size:20px;font-weight:900;color:#6a8798;margin-bottom:22px}.name-actions{gap:9px;flex-wrap:nowrap}.name-actions .big-action{min-width:135px;padding:9px 13px;font-size:19px}


/* Ver.1.12: おなまえ連続練習 + じゆうちょう全面キャンバス */
.name-practice-layout{height:100%;display:grid;grid-template-rows:auto 1fr 74px;gap:8px;min-height:0}
.name-display-panel{background:rgba(255,255,255,.94);border-radius:24px;padding:8px 18px;box-shadow:var(--shadow);display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:16px;align-items:center}
.name-display-label{font-size:15px;font-weight:1000;color:#6a8799;grid-column:1}
.name-display-full{font-size:clamp(28px,4.2vw,50px);font-weight:1000;color:#24445b;letter-spacing:.12em;grid-column:1;white-space:nowrap}
.name-written-strip{grid-column:2;grid-row:1/3;display:flex;gap:8px;align-items:center;justify-content:center;min-width:0;overflow:hidden}
.name-written-tile{width:clamp(48px,6vw,78px);height:clamp(48px,6vw,78px);border-radius:16px;background:#f4f9fc;border:3px dashed #b9d7e8;display:flex;align-items:center;justify-content:center;font-size:clamp(22px,3vw,38px);font-weight:1000;color:#aac2d0;flex:0 1 auto}
.name-written-tile.current{border-color:#ffbf52;background:#fff6ca;color:#365d75;box-shadow:0 0 0 4px rgba(255,205,91,.18)}
.name-written-tile.done{border-style:solid;border-color:#9bd7ad;background:white;padding:3px}
.name-written-tile img{width:100%;height:100%;object-fit:contain;border-radius:12px}
.name-canvas-wrap{min-height:0;display:flex}
.name-canvas-card{width:min(100%,1000px);height:100%;margin:auto}
.name-actions{padding-bottom:2px}
.name-finish-screen{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:20px;background:radial-gradient(circle at 50% 35%,#fff 0 30%,#fff8ca 68%,#e1f7ff 100%);border-radius:28px}
.name-finish-label{font-size:clamp(22px,3vw,34px);font-weight:1000;color:#4e7790;background:white;border-radius:999px;padding:10px 22px;box-shadow:var(--shadow)}
.name-finish-big{font-size:clamp(64px,12vw,150px);font-weight:1000;letter-spacing:.12em;color:#24445b;text-shadow:0 6px 0 white;white-space:nowrap;max-width:96vw;overflow:hidden;text-overflow:ellipsis}
.name-finish-written{display:flex;gap:8px;max-width:90vw;justify-content:center;overflow:hidden}
.name-written-final{width:72px;height:72px;background:white;border-radius:16px;padding:3px;box-shadow:0 5px 14px rgba(54,101,128,.15)}
.name-written-final img{width:100%;height:100%;object-fit:contain}
.name-finish-actions{display:flex;gap:12px}

.notebook-fullscreen{position:absolute;inset:0;overflow:hidden;background:#fff}
.notebook-canvas-card{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;margin:0!important;border:0!important;border-radius:0!important;box-shadow:none!important;background:#fff!important}
.notebook-canvas-card canvas{width:100%;height:100%;background:#fff!important}
.notebook-float{position:absolute;z-index:20;border-radius:18px;background:rgba(255,255,255,.94);box-shadow:0 6px 18px rgba(36,68,91,.18);padding:11px 18px;font-size:18px;font-weight:1000;color:#24445b}
.notebook-back{left:14px;top:14px}
.notebook-save{right:14px;top:14px;background:#ffd17d}
.notebook-floating-tools{position:absolute;z-index:20;left:50%;bottom:12px;transform:translateX(-50%);width:min(1120px,96%);background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border-radius:24px;padding:10px 14px;box-shadow:0 8px 28px rgba(36,68,91,.20);display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center}
.notebook-color-row{display:grid;grid-template-columns:repeat(6,42px);gap:6px}
.notebook-color-row .color-dot{width:42px;height:42px;aspect-ratio:auto;border-width:4px}
.notebook-tool-row{display:flex;gap:7px;align-items:center;justify-content:flex-end;flex-wrap:wrap}
.notebook-tool-row .tool-btn,.notebook-tool-row .size-btn{min-height:44px;padding:7px 10px;font-size:15px;box-shadow:0 3px 0 rgba(30,75,100,.10)}
.danger-mini{background:#ffdfe2!important}
@media(max-width:900px){.notebook-floating-tools{grid-template-columns:1fr;gap:8px}.notebook-color-row{grid-template-columns:repeat(11,34px);justify-content:center}.notebook-color-row .color-dot{width:34px;height:34px}.notebook-tool-row{justify-content:center}.name-display-panel{grid-template-columns:1fr}.name-written-strip{grid-column:1;grid-row:auto}.name-display-full{text-align:center}.name-display-label{text-align:center}}