*{box-sizing:border-box}body{margin:0;color:#44200f;font-family:system-ui,'Segoe UI',sans-serif;background:radial-gradient(circle at 25% 10%,#fff4c7 0,transparent 26%),radial-gradient(circle at 80% 45%,#ffc6dd 0,transparent 40%),linear-gradient(135deg,#ffcad6,#ffe5e9 50%,#ffc1cf);min-height:100vh}
.shell{max-width:1180px;margin:auto;padding:20px 14px 40px}.top{text-align:center;margin:0 auto 16px;padding:12px 20px;border:9px ridge #8e4c25;border-radius:25px;background:repeating-linear-gradient(0deg,#8d4b24,#a86333 14px,#935026 17px,#b7763e 27px);color:white;box-shadow:0 10px 0 #5a2d17,0 16px 25px #5e2a2a55}
.logo{height:76px;max-width:100%;object-fit:contain;filter:drop-shadow(0 3px 2px #fff8)}h1{margin:4px;font-size:clamp(23px,4vw,39px);color:#fff5dc;text-shadow:2px 3px #5d2611}.subtitle{font-weight:800;color:#ffe3a2;letter-spacing:1px}
.layout{display:grid;grid-template-columns:205px minmax(0,1fr) 205px;gap:14px;align-items:start}.wood{border:9px ridge #a66131;border-radius:23px;background:repeating-linear-gradient(0deg,#7c3c1e,#995328 16px,#a96431 22px,#8b4522 32px);box-shadow:inset 0 0 0 4px #5b2c14,0 10px 20px #6139234a;padding:13px}
.panel h2{color:#fff0ca;text-align:center;margin:0 0 13px;text-shadow:1px 2px #532c1c;font-size:23px}.stat{border:3px solid #c58a48;background:linear-gradient(145deg,#391b0e,#623018);border-radius:14px;padding:12px;margin:9px 0;color:white;text-align:center;box-shadow:inset 0 2px 5px #0008}.stat small{display:block;font-size:13px;color:#ffddac;font-weight:800}.stat strong{display:block;font-size:30px;font-variant-numeric:tabular-nums}.stat em{font-size:11px;color:#ffe5ca;font-style:normal}
.btn{display:block;width:100%;border:3px solid #fff5b6;border-radius:15px;padding:13px 7px;font-size:16px;font-weight:900;cursor:pointer;box-shadow:0 5px 0 #683517,0 7px 9px #0003;margin-top:12px;color:#fff;text-shadow:0 1px #60312a;touch-action:manipulation}.btn:active{transform:translateY(3px);box-shadow:0 2px 0 #683517}.btn:disabled{opacity:.5;cursor:not-allowed}.green{background:linear-gradient(#3bdf85,#079954)}.pink{background:linear-gradient(#ff7c9d,#e62960)}.gold{background:linear-gradient(#ffd45b,#ed9512);color:#59330d;text-shadow:none}
.board{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px;padding:8px;border:7px inset #6e3517;background:#371c0e;border-radius:18px;aspect-ratio:1/1.08;user-select:none;-webkit-user-select:none;touch-action:pan-y}
.tile{min-width:0;min-height:0;border:2px solid #fff4ce;border-radius:12px;background:linear-gradient(140deg,var(--light),var(--base) 58%,var(--dark));box-shadow:inset 0 3px 3px #fff8,inset 0 -5px 3px #0002,0 3px 2px #0005;display:flex;align-items:center;justify-content:space-around;flex-direction:column;cursor:grab;padding:5px 2px;touch-action:none;position:relative;overflow:hidden;transition:filter .15s,transform .12s}
.tile:active{cursor:grabbing;transform:scale(.96)}.tile:focus-visible{outline:4px solid #fff;outline-offset:-4px}.tile.suggested{outline:4px solid #fff400;outline-offset:-4px;animation:hintpulse .65s ease-in-out infinite alternate;z-index:2}@keyframes hintpulse{from{filter:brightness(1)}to{filter:brightness(1.45)}}.tile.movable{box-shadow:inset 0 3px 3px #fff8,inset 0 -5px 3px #0002,0 0 0 2px #fff6,0 3px 2px #0005}.tile .emoji{font-size:clamp(19px,3.8vw,49px);filter:drop-shadow(1px 4px 2px #41200b7d);line-height:1.05}.tile .name{font-size:clamp(7px,1.1vw,12px);font-weight:1000;background:#fff1dcdf;color:#41210f;border-radius:30px;padding:3px 4px;text-align:center;width:97%;line-height:1.05;overflow-wrap:anywhere}.tile.goal{background:linear-gradient(145deg,#fff0a6,#ffb81c 58%,#df8110);border-color:#fff0b3}.tile.goal .name{font-size:clamp(9px,1.65vw,21px);background:transparent;color:#69310b;text-shadow:0 1px #fff9;overflow-wrap:normal}.tile.goal .emoji{font-size:clamp(15px,2.8vw,33px)}.empty{background:repeating-linear-gradient(0deg,#271309,#3b1e0e 8px,#2a1409 16px);border:3px inset #82431d;border-radius:12px}
.notice{text-align:center;background:#ffe7b2;border:3px solid #bc8047;border-radius:13px;margin-top:12px;padding:9px;font-weight:800;font-size:14px}.goalbar{text-align:center;background:linear-gradient(#af642f,#75401e);border:5px ridge #d29b57;border-radius:13px;color:#fff0b9;margin-top:12px;padding:11px;font-weight:1000;font-size:clamp(16px,2.5vw,26px);text-shadow:2px 2px #52240d}
.parchment{background:linear-gradient(100deg,#f8d39b,#ffe9bb 50%,#f1c78d);border:5px ridge #b97b43;border-radius:17px;padding:15px 11px;box-shadow:0 4px 10px #0002}.parchment h2{margin:0 0 14px;text-align:center}.parchment p{font-size:14px;line-height:1.5}.pill{background:#fff6d7;border-radius:30px;padding:3px 8px;color:#713c21;font-weight:900}.overlay{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:#210e20c9;padding:18px;z-index:10}.overlay.show{display:flex}.modal{max-width:520px;width:100%;text-align:center;background:linear-gradient(#fff6d3,#ffd1df);border:9px ridge #b8753c;border-radius:25px;padding:26px;box-shadow:0 20px 65px #0008}.modal h2{font-size:32px;color:#aa285e;margin:5px}.modal p{font-weight:700}.confetti{font-size:45px}
@media(max-width:850px){.layout{grid-template-columns:1fr}.controls{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.controls h2{grid-column:1/-1}.stat{margin:0;padding:7px}.stat strong{font-size:23px}.btn{margin-top:4px;font-size:13px;padding:10px 3px}.wood{padding:8px}.parchment p{display:inline-block;margin:5px 8px}.board{max-width:670px;margin:auto;width:100%}.tile .name{font-size:clamp(7px,2.2vw,13px)}.tile.goal .name{font-size:clamp(10px,2.5vw,20px)}.tile .emoji{font-size:clamp(19px,7vw,49px)}}
@media(max-width:420px){.board{gap:3px;padding:4px;border-width:4px}.tile{border-width:1px;border-radius:7px;padding:3px 1px}.tile .name{font-size:7px}.tile.goal .name{font-size:10px}.tile .emoji{font-size:24px}.shell{padding:7px}.top{padding:5px}.logo{height:54px}}

/* Realistic wood grain, deep frame and polished beveled puzzle keys */
.top,.wood{background-image:linear-gradient(105deg,#0005,transparent 28%,#fff2 48%,transparent 65%,#0005),url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMDAiIGhlaWdodD0iMjIwIiB2aWV3Qm94PSIwIDAgMzAwIDIyMCI+PHJlY3Qgd2lkdGg9IjMwMCIgaGVpZ2h0PSIyMjAiIGZpbGw9IiM4ZDRiMjUiLz48ZyBmaWxsPSJub25lIiBzdHJva2UtbGluZWNhcD0icm91bmQiPjxwYXRoIGQ9Ik0wIDggUTgwIDMgMTUwIDExIFQzMDAgNyBNMCAxNyBRMTIwIDIzIDIwMCAxNiBUMzAwIDE4IE0wIDM1IFE3MCAyOCAxNjUgMzcgVDMwMCAzMiBNMCA1NSBRMTIwIDYxIDIyMCA1NCBUMzAwIDU2IE0wIDgxIFE3MCA3MiAxNzAgODAgVDMwMCA3NiBNMCAxMDQgUTg1IDExMiAxODAgMTAxIFQzMDAgMTA1IE0wIDEzMyBRMTEwIDEyMyAxODAgMTM0IFQzMDAgMTMwIE0wIDE1NyBROTAgMTY1IDE5MCAxNTUgVDMwMCAxNTkgTTAgMTg3IFE4NSAxODEgMTcwIDE5MCBUMzAwIDE4NiBNMCAyMDggUTkwIDIxNiAxNzAgMjA3IFQzMDAgMjEwIiBzdHJva2U9IiM0ODIyMGYiIHN0cm9rZS13aWR0aD0iMiIgb3BhY2l0eT0iLjM4Ii8+PHBhdGggZD0iTTAgMjUgUTkwIDE5IDE2NSAyNyBUMzAwIDIzIE0wIDY5IFE5MCA3NSAxNzAgNjggVDMwMCA3MSBNMCAxMTkgUTkwIDEyNSAxNzAgMTE4IFQzMDAgMTIwIE0wIDE3MyBROTAgMTY3IDE3MCAxNzYgVDMwMCAxNzAiIHN0cm9rZT0iI2U5YTY2NSIgc3Ryb2tlLXdpZHRoPSIyIiBvcGFjaXR5PSIuMzYiLz48ZWxsaXBzZSBjeD0iMjEwIiBjeT0iMTQzIiByeD0iMzgiIHJ5PSIxMCIgc3Ryb2tlPSIjNWEyYTE0IiBzdHJva2Utd2lkdGg9IjIiIG9wYWNpdHk9Ii4zIi8+PGVsbGlwc2UgY3g9IjIxMCIgY3k9IjE0MyIgcng9IjIwIiByeT0iNCIgc3Ryb2tlPSIjZDI4YzRlIiBvcGFjaXR5PSIuMzUiLz48L2c+PC9zdmc+");background-size:cover,300px 220px;border:10px ridge #b77940;box-shadow:inset 0 0 0 3px #f1b36b,inset 0 0 18px #2a1009,0 9px 0 #57290f,0 17px 26px #532b224f}
.top{padding:18px 10px}
.top h1{font-size:clamp(24px,4vw,44px);letter-spacing:.7px;text-shadow:0 2px 0 #502008,0 5px 5px #210e0a}
.board{border:9px ridge #9e5a2e;box-shadow:inset 0 6px 15px #0009,0 2px 0 #e6a96c;gap:6px;padding:9px}
.tile{border:2px solid #ffedca;border-bottom:5px solid var(--dark);border-right:4px solid var(--dark);border-radius:15px;background:radial-gradient(ellipse at 27% 13%,#fff9 0,transparent 32%),linear-gradient(150deg,var(--light) 0%,var(--base) 51%,var(--dark) 100%);box-shadow:inset 2px 3px 2px #fff9,inset -3px -5px 5px #0003,0 5px 0 #2c170c,0 8px 8px #0007;transform:translateY(-2px);transition:transform .13s,box-shadow .13s,filter .13s}
.tile:active{transform:translateY(3px) scale(.98);box-shadow:inset 0 3px 7px #0004,0 1px 1px #0008}
.tile.movable{box-shadow:inset 2px 3px 2px #fff9,inset -3px -5px 5px #0003,0 5px 0 #2c170c,0 0 0 2px #ffe8a9,0 8px 8px #0007}
.tile .emoji{filter:drop-shadow(1px 3px 1px #37160c88) drop-shadow(-1px -1px 1px #fff9)}
.tile .name{background:linear-gradient(#fff9ef,#f7d8bd);box-shadow:inset 0 1px 1px #fff,0 2px 3px #35130655;border:1px solid #fff6}
.tile.goal{background:radial-gradient(ellipse at 30% 10%,#fff9 0,transparent 43%),linear-gradient(145deg,#fff4a0,#ffb617 60%,#b96708)}
.empty{box-shadow:inset 0 5px 12px #000c}
@media(max-width:420px){.board{gap:3px;padding:4px;border-width:5px}.tile{border-radius:8px;border-width:1px;border-bottom-width:3px;border-right-width:2px}}

#register select{display:block;width:100%;padding:12px;border:2px solid #a56c41;border-radius:10px;font-size:17px;margin:7px 0 15px;background:#fff;color:#44200f} .modal{max-height:94vh;overflow-y:auto} #register input{display:block;width:100%;padding:12px;border:2px solid #a56c41;border-radius:10px;font-size:17px;margin:7px 0 15px}
#register label{display:block;text-align:left;font-weight:800}.idrow{display:flex;align-items:center;gap:8px}.idrow b{padding:12px;background:#f6d5a2;border-radius:9px}.idrow input{flex:1;min-width:0}
#entryMessage{color:#a01946;min-height:22px}.tile.suggested{outline:5px solid #fff23e;outline-offset:-5px;filter:brightness(1.2)}

/* Keep the goal beside the board for a compact, screenshot-friendly game. */
.game-section{display:grid;grid-template-columns:minmax(0,1fr) 48px;gap:10px;align-items:stretch}
.game-content{min-width:0}
.game-section .goalbar{margin:0;padding:12px 6px;writing-mode:vertical-rl;text-orientation:mixed;display:flex;align-items:center;justify-content:center;font-size:clamp(17px,2vw,23px);letter-spacing:1px;white-space:nowrap}
@media(min-width:851px){.shell{max-width:1120px;padding-top:12px}.layout{grid-template-columns:180px minmax(0,1fr) 180px;gap:12px}.top{padding:10px}.board{aspect-ratio:1/1}.panel .stat{padding:8px;margin:7px 0}.panel .stat strong{font-size:26px}.parchment{padding:12px 8px}.parchment p{font-size:13px}.btn{padding:10px 5px;font-size:14px}}
@media(max-width:850px){.game-section{grid-template-columns:minmax(0,1fr) 38px;gap:6px}.game-section .goalbar{font-size:17px;padding:8px 3px;border-width:3px}.game-section .board{aspect-ratio:1/1}.game-section .notice{font-size:12px;padding:6px;margin-top:7px}.top{padding:8px}.shell{padding-bottom:14px}.controls .stat{padding:4px}.controls .stat strong{font-size:20px}.controls .btn{padding:7px 3px}.parchment{padding:8px}.parchment h2{font-size:18px;margin-bottom:5px}.parchment p{font-size:12px;line-height:1.35;margin:4px}.game-section .tile .emoji{font-size:clamp(18px,6vw,42px)}}
@media(max-width:420px){.game-section{grid-template-columns:minmax(0,1fr) 32px;gap:4px}.game-section .goalbar{font-size:15px;letter-spacing:.4px;padding:6px 2px}.game-section .tile.goal .name{font-size:9px}.game-section .tile .name{font-size:6px}}

/* The game occupies the full frame after removal of the vertical slogan. */
.game-section{grid-template-columns:minmax(0,1fr)}

.top{display:grid;grid-template-columns:150px minmax(0,1fr) 150px;align-items:center;gap:14px}.brand-logo{background:#fff;border-radius:12px;padding:5px;display:flex;align-items:center;justify-content:center}.brand-logo img{width:130px;height:105px;object-fit:contain}.top h1{font-size:clamp(22px,3.3vw,38px)}.brand-slogan{font-size:24px;font-weight:900;line-height:1.3;color:#ffe3a2}.subtitle{font-size:12px}.game-section{display:block}#retry{background:#a32835}button:disabled{opacity:.55}a{color:inherit}.tile .name{overflow-wrap:normal}.tile.goal .name{font-size:clamp(9px,1.3vw,17px)}@media(max-width:650px){.top{grid-template-columns:80px minmax(0,1fr);gap:8px}.brand-logo img{width:65px;height:65px}.brand-slogan{grid-column:1/-1;font-size:18px}.top h1{font-size:22px}.subtitle{font-size:10px}.tile.goal .name{font-size:clamp(8px,2vw,14px)}}
[hidden]{display:none!important}