html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#29251f;overscroll-behavior:none}
#game-viewport{position:fixed;inset:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);overflow:hidden}
iframe{position:absolute;left:50%;top:50%;display:block;width:100%;height:100%;border:0;background:#fef6eb;transform:translate(-50%,-50%)}
@media(orientation:portrait){iframe{width:var(--game-height,100dvh);height:var(--game-width,100vw);transform:translate(-50%,-50%) rotate(90deg)}}
html{font-family:"Microsoft YaHei",system-ui,sans-serif}
[hidden]{display:none!important}
#landscape-entry{position:fixed;inset:0;z-index:20;display:grid;place-items:center;padding:24px;background:#35200fe8;box-sizing:border-box}
.landscape-card{width:min(100%,340px);box-sizing:border-box;text-align:center;padding:30px 22px 25px;background:linear-gradient(#fff8d7,#ffe89b);border:4px solid #fff1ad;border-radius:28px;box-shadow:0 7px 0 #a9571b,0 16px 40px #0005;color:#7d390f}
.landscape-card h1{font-size:28px;line-height:1.3;margin:0 0 22px;color:#cc4d08;text-shadow:0 2px #fff8cf}
.turn-phone{width:92px;height:48px;margin:0 auto 22px;border:4px solid #b85f20;border-radius:12px;position:relative;background:#ffe28a;box-shadow:inset 0 0 0 4px #fff8ce}
.turn-phone:before{content:"↻";position:absolute;inset:-26px -38px;font-size:76px;line-height:100px;color:#d78827}
.landscape-card strong{display:block;font-size:21px;margin:0 0 9px}
.landscape-card p{font-size:14px;line-height:1.7;margin:0 0 24px}
#enter-landscape{width:100%;min-height:56px;border:0;border-radius:18px;font-family:inherit;font-weight:700;font-size:22px;line-height:1.2;color:#fff9dd;background:linear-gradient(#ffd750,#ff9115);box-shadow:0 5px 0 #bd5d10;text-shadow:0 2px #b66b1c;cursor:pointer;touch-action:manipulation}
#enter-landscape:active{transform:translateY(3px);box-shadow:0 2px 0 #bd5d10}
#landscape-hint{position:fixed;left:50%;top:max(12px,env(safe-area-inset-top));transform:translateX(-50%);z-index:30;max-width:85vw;width:max-content;padding:10px 15px;border-radius:16px;background:#fff2bb;color:#743b16;font-size:14px;font-weight:bold;text-align:center;box-shadow:0 3px 12px #0004;pointer-events:none}
@media(orientation:landscape){#landscape-entry,#landscape-hint{display:none!important}}
#offline-panel{position:fixed;z-index:40;right:max(12px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom));width:min(310px,calc(100vw - 24px));box-sizing:border-box;padding:13px 40px 13px 15px;border:3px solid #fff0a7;border-radius:18px;background:linear-gradient(145deg,#fff9dcf5,#ffe495f5);box-shadow:0 5px 0 #a9571b,0 10px 28px #0005;color:#713612}
#offline-panel strong,#offline-panel span{display:block}#offline-title{font-size:16px;color:#c64c0d}#offline-text{margin-top:3px;font-size:12px;line-height:1.5}#offline-close{position:absolute;right:8px;top:5px;width:30px;height:30px;border:0;background:transparent;color:#96511f;font-size:25px;line-height:1;cursor:pointer}
#offline-actions{display:flex;gap:8px;margin-top:9px}#offline-actions button{min-height:34px;padding:0 13px;border:0;border-radius:12px;background:linear-gradient(#ffd44b,#ff9118);box-shadow:0 3px 0 #ba5a10;color:#fff;font:700 13px/1 "Microsoft YaHei",sans-serif;text-shadow:0 1px #a54b0b;cursor:pointer}#offline-actions button:active{transform:translateY(2px);box-shadow:0 1px 0 #ba5a10}
#offline-progress{height:8px;margin-top:8px;border-radius:999px;overflow:hidden;background:#c5874755;box-shadow:inset 0 1px 2px #7b421655}#offline-progress i{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,#ff9d1d,#6fce2b);transition:width .2s}
@media(max-height:430px) and (orientation:landscape){#offline-panel{width:265px;padding:9px 36px 9px 12px;border-width:2px;border-radius:14px}#offline-title{font-size:14px}#offline-text{font-size:11px}#offline-actions{margin-top:6px}#offline-actions button{min-height:30px}}