[hidden]{display:none!important}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;height:100%}
body{font-family:"Nunito","Comic Sans MS",system-ui,sans-serif;background:#fff8e7;color:#3b3355;display:flex;flex-direction:column;user-select:none;-webkit-user-select:none}
header{display:flex;align-items:center;gap:10px;padding:10px 14px}#ttl{font-size:clamp(22px,3vw,32px);font-weight:800;color:#ff7a59}.sp{flex:1}
.ic{font-size:34px;width:64px;height:64px;border-radius:32px;border:0;background:#ffe0a8}
main{flex:1;padding:0 14px 14px;overflow:auto}section{height:100%;display:flex;flex-direction:column;gap:14px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:18px}
.tile{position:relative;border:0;border-radius:28px;min-height:190px;font-size:90px;box-shadow:0 7px 0 rgba(0,0,0,.15);display:flex;flex-direction:column;align-items:center;justify-content:center;color:#3b3355}
.tile small{font-size:22px;font-weight:800}.tile.locked{filter:grayscale(.6);opacity:.75}
.lock{position:absolute;top:8px;right:8px;font-size:28px;background:#7b5cff;border-radius:20px;padding:4px 8px}
.tray{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;min-height:120px}
.card{width:150px;height:170px;border:0;background:#fff;border-radius:22px;box-shadow:0 6px 0 #e6d3b0;display:flex;flex-direction:column;align-items:center;justify-content:center;font:inherit;font-size:18px;padding:8px;touch-action:none;color:#3b3355}
.card .e{font-size:66px;line-height:1.1}.card.drag{position:fixed;z-index:9;pointer-events:none;transform:scale(1.08)}
.card.gone{visibility:hidden}
.strip{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;background:#c8f0d8;border-radius:26px;padding:12px;margin-top:auto}
.slot{position:relative;min-height:150px;border:4px dashed #6cc596;border-radius:18px;background:#effbf3;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:15px;text-align:center;padding:4px}
.slot .n{position:absolute;top:4px;left:10px;font-size:22px;font-weight:800;color:#3fa070}.slot .e{font-size:48px}
.slot.f{border-style:solid;background:#fff}.slot.next{border-color:#ff7a59;animation:pulse 1.2s infinite}.slot.over{background:#ffe9d6}
@keyframes pulse{50%{transform:scale(1.04)}}
.row{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.big{border:0;border-radius:40px;min-width:120px;min-height:84px;padding:10px 30px;font:inherit;font-size:40px;font-weight:800;color:#fff;background:#ff7a59;box-shadow:0 7px 0 #d45c3e}
.big:active,.tile:active,.card:active{transform:translateY(4px)}
.go{background:#3fb37f;box-shadow:0 7px 0 #2c8a60}.blue{background:#4aa3ff;box-shadow:0 7px 0 #2f7fd0}.purple{background:#7b5cff;box-shadow:0 7px 0 #5a3fd6}.ghost{background:#ffe0a8;color:#3b3355;box-shadow:0 7px 0 #e0bd7c}
#readBtn{animation:pulse 1.2s infinite}
.page{flex:1;display:flex;align-items:center;gap:14px}.arrow{flex:none;width:96px;height:96px;border-radius:48px;border:0;background:#ffe0a8;font-size:48px;color:#3b3355}.arrow:disabled{opacity:.3}
.book{flex:1;align-self:stretch;background:#fff;border-radius:30px;box-shadow:0 10px 0 #e6d3b0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:16px;text-align:center}
.ppic{font-size:clamp(120px,22vh,230px);line-height:1.1}.ptxt{font-size:clamp(30px,5vw,54px);font-weight:800;margin-top:12px}.pnum{font-size:22px;color:#a99;margin-top:10px}
.ptxt.speaking{color:#ff7a59}
.bk{position:relative}.del{position:absolute;bottom:6px;right:6px;font-size:22px;border:0;background:#fff;border-radius:16px;width:44px;height:44px}
.modal{position:fixed;inset:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:12px 0;background:rgba(40,30,60,.5);display:flex;align-items:center;justify-content:center;z-index:20}
.box{margin:auto;max-height:calc(100dvh - 24px);overflow-y:auto;box-sizing:border-box;background:#fff;border-radius:28px;padding:22px;max-width:560px;width:92%;text-align:center;font-size:20px}.box input{font-size:40px;width:160px;text-align:center;border-radius:16px;border:3px solid #ccc;margin-bottom:14px}
table{width:100%;border-collapse:collapse;margin:10px 0 16px}td,th{padding:8px;border-bottom:1px solid #eee}th:last-child,td:last-child{background:#f1ecff}.small{font-size:16px}select{font-size:18px}
#toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:#3b3355;color:#fff;font-size:30px;padding:14px 24px;border-radius:30px;z-index:30}
@media (max-width:700px){.strip{grid-template-columns:repeat(3,1fr)}.card{width:112px;height:132px;font-size:14px}.card .e{font-size:50px}.slot{min-height:118px}.slot .e{font-size:40px}
.page{flex-wrap:wrap;justify-content:center}.book{flex-basis:100%;order:-1;min-height:55vh}.grid{grid-template-columns:1fr 1fr}.tile{min-height:160px;font-size:76px}.big{font-size:34px;min-width:96px}}
.ht{display:flex;flex-direction:column;line-height:1.1}
#ded{font-size:14px;color:#8b7fa8;font-weight:500;margin-top:2px;letter-spacing:.2px}

#relock{min-height:56px;padding:10px 22px;border:0;border-radius:28px;font:inherit;font-size:20px;font-weight:800}