.tf-page{--tf-main:#e85d24;--tf-deep:#7c2d12;--tf-soft:#fff7ed;--tf-accent:#facc15;max-width:1040px;margin:0 auto;padding:30px 18px 70px;color:#292524}.tf-page.sweets{--tf-main:#e84a8a;--tf-deep:#831843;--tf-soft:#fff1f6;--tf-accent:#5eead4}.tf-title{text-align:center}.tf-title .section-label{color:var(--tf-main)}.tf-title h1{margin:4px 0 6px;font-size:clamp(30px,6vw,52px)}.tf-title p{margin:0;color:#78716c}.tf-shell{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:18px;margin-top:26px}.tf-game{position:relative;min-height:525px;overflow:hidden;border:3px solid var(--tf-deep);border-radius:18px;background:linear-gradient(180deg,var(--tf-soft),#fff);box-shadow:0 18px 45px rgb(41 37 36 / 14%)}.tf-scene{position:relative;display:flex;min-height:525px;flex-direction:column}.tf-hud{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--tf-deep);color:#fff}.tf-hud div{padding:9px 6px;background:rgb(0 0 0 / 12%);text-align:center}.tf-hud small{display:block;font-size:9px;letter-spacing:1px;opacity:.75}.tf-hud strong{font-size:18px}.tf-track{position:relative;display:flex;flex:1;align-items:center;justify-content:center;padding:35px 24px 25px;background:repeating-linear-gradient(0deg,transparent 0 42px,rgb(255 255 255 / 45%) 43px 44px)}.tf-track::after{position:absolute;right:0;bottom:0;left:0;height:56px;content:"";background:repeating-linear-gradient(90deg,var(--tf-deep) 0 36px,#57534e 36px 43px);opacity:.2}.tf-order{position:relative;z-index:1;width:min(510px,100%);padding:28px 22px 22px;border:2px solid rgb(120 53 15 / 18%);border-radius:20px;background:rgb(255 255 255 / 94%);box-shadow:0 15px 35px rgb(120 53 15 / 14%);text-align:center;animation:tf-in .25s ease-out}.tf-emoji{display:block;font-size:72px;line-height:1}.tf-name{margin:10px 0 3px;font-size:25px}.tf-kana{margin:0;color:#78716c;font-size:14px}.tf-roman{margin:18px 0 10px;font:bold clamp(23px,5vw,38px)/1.25 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:2px;overflow-wrap:anywhere}.tf-done{color:var(--tf-main)}.tf-current{border-bottom:3px solid var(--tf-accent);color:var(--tf-deep)}.tf-rest{color:#a8a29e}.tf-limit{height:10px;overflow:hidden;border-radius:99px;background:#e7e5e4}.tf-limit span{display:block;width:100%;height:100%;background:linear-gradient(90deg,var(--tf-main),var(--tf-accent));transform-origin:left}.tf-message{min-height:28px;margin-top:10px;color:var(--tf-main);font-weight:800}.tf-overlay{position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;padding:28px;background:rgb(41 37 36 / 88%);color:#fff;text-align:center}.tf-overlay[hidden]{display:none}.tf-modal{max-width:480px}.tf-modal h2{margin:0 0 12px;color:var(--tf-accent);font-size:30px}.tf-modal p{line-height:1.8}.tf-levels{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:20px 0}.tf-levels button,.tf-start{border:0;border-radius:9px;padding:12px;background:#fff;color:var(--tf-deep);font-weight:800;cursor:pointer}.tf-levels button.active{outline:4px solid var(--tf-accent);background:var(--tf-soft)}.tf-start{padding:13px 28px;background:var(--tf-main);color:#fff;font-size:16px}.tf-side{display:flex;flex-direction:column;gap:12px}.tf-panel{padding:18px;border:1px solid #e7e5e4;border-radius:12px;background:#fff}.tf-panel h2{margin:0 0 8px;color:var(--tf-main);font-size:15px}.tf-panel p,.tf-panel li{color:#57534e;font-size:12px;line-height:1.8}.tf-panel ul{margin:0;padding-left:18px}.tf-ranking{margin:0;padding:0;list-style:none;counter-reset:rank}.tf-ranking li{display:flex;justify-content:space-between;padding:5px 0;border-bottom:1px dashed #e7e5e4}.tf-ranking li::before{counter-increment:rank;content:counter(rank) ".";color:var(--tf-main);font-weight:900}.tf-sound{width:100%;border:1px solid #e7e5e4;border-radius:8px;padding:9px;background:var(--tf-soft);cursor:pointer}.tf-note{margin-top:18px;color:#78716c;font-size:11px;text-align:center}@keyframes tf-in{from{opacity:0;transform:translateX(45px)}to{opacity:1;transform:none}}@media(max-width:760px){.tf-shell{grid-template-columns:1fr}.tf-game,.tf-scene{min-height:475px}.tf-side{display:grid;grid-template-columns:1fr 1fr}.tf-panel:first-child{grid-column:1/-1}.tf-hud strong{font-size:14px}.tf-track{padding:22px 12px}.tf-order{padding:22px 12px 18px}.tf-emoji{font-size:58px}}@media(max-width:430px){.tf-page{padding-right:8px;padding-left:8px}.tf-hud small{font-size:8px}.tf-side{display:block}.tf-panel{margin-bottom:10px}.tf-levels{grid-template-columns:1fr}.tf-roman{font-size:22px}}

/* ゲーム幅を保ち、補助パネルをゲームの下へ配置する */
.tf-shell{display:block}.tf-side{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;width:100%;max-width:none;margin-top:18px;padding:0}.tf-panel:first-child{grid-column:auto}@media(max-width:620px){.tf-side{grid-template-columns:1fr}}

/* アトラスの1マスを正確に切り出し、余白を付けて中央表示する */
.tf-emoji{display:flex;width:180px;height:180px;align-items:center;justify-content:center;overflow:hidden;margin:0 auto;border-radius:18px;background:var(--tf-soft);box-shadow:0 8px 20px rgb(41 37 36 / 12%);font-size:0}
.tf-emoji canvas{display:block;width:100%;height:100%}
@media(max-width:430px){.tf-emoji{width:145px;height:145px}}
.tf-sound+.tf-sound{margin-top:8px}
.tf-game,.tf-order,.tf-panel,.tf-levels button,.tf-start,.tf-sound{border-radius:8px}