html,body{
 margin:0;
 height:100%;
 overflow:hidden;
 font-family:Verdana,sans-serif;
}

body{
 background:#111;
}

:root{
 --room-width:1535px;
 --room-height:1024px;
 --room-scale:1;
 --paper:#f3dfb7;
 --paper2:#fff8e8;
 --ink:#24190f;
 --line:#8e6b3a;
 --green:#273d28;
 --gold:#d7a93e;
 --danger:#8b2f2a;
 --touch:48px;
}

button,input,select{
 font:inherit;
 min-height:var(--touch);
 border-radius:8px;
 box-sizing:border-box;
}

button{
 border:0;
 padding:10px 14px;
 background:var(--green);
 color:white;
 cursor:pointer;
 box-shadow:0 2px 0 rgba(0,0,0,.35);
}

button:active{
 transform:translateY(1px);
}

input,select{
 border:2px solid var(--line);
 background:var(--paper2);
 color:var(--ink);
 padding:10px 12px;
}

/* Hintergrundbild mittig für 32:9 */
#scene{
 position:fixed;
 left:50%;
 top:50%;
 width:var(--room-width);
 height:var(--room-height);
 transform:translate(-50%,-50%) scale(var(--room-scale));
 transform-origin:center;
 background:url('klassenzimmer_neu.webp') center center / 100% 100% no-repeat;
 image-rendering:pixelated;
}

/* Unsichtbarer Referenzrahmen orientiert am Bild */
#ui{
 position:fixed;
 left:50%;
 top:50%;
 width:var(--room-width);
 height:var(--room-height);
 transform:translate(-50%,-50%) scale(var(--room-scale));
 transform-origin:center;
}

#brandClaim{
 position:absolute;
 left:2.8%;
 top:auto;
 bottom:5.8%;
 z-index:20;
 color:#fff8e8;
 text-shadow:2px 2px 4px rgba(0,0,0,.85);
 line-height:1.08;
 pointer-events:none;
 max-width:300px;
 opacity:.92;
}

#brandClaim strong{
 display:block;
 font-size:28px;
 letter-spacing:0;
}

#brandClaim span{
 display:block;
 margin-top:4px;
 font-size:16px;
 font-weight:bold;
 color:#f5d184;
}

#brandClaim small{
 display:block;
 margin-top:4px;
 font-size:13px;
 color:#fff0cf;
}

#gameWrapper{

 position:absolute;

 left:35%;
 top:20.5%;

 width:27%;

}

#game{

 width:100%;

 padding:10px 52px 10px 12px;

 box-sizing:border-box;

}

#randomBtn{

 position:absolute;

 right:5px;

 top:50%;

 transform:translateY(-50%);

 width:40px;
 min-height:40px;
 height:40px;
 padding:0;
 border:0;
 border-radius:8px;
 background:var(--gold);
 color:#201508;

 cursor:pointer;

 font-size:20px;

}

#randomBtn:active{
 transform:translateY(-50%) translateY(1px);
}

#timer{
 display:none;
}

#lessonStatus{
 position:absolute;
 left:50%;
 top:26.2%;
 transform:translateX(-50%);
 width:560px;
 max-width:74%;
 padding:8px 14px;
 border-radius:8px;
 background:rgba(36,25,15,.56);
 color:#fff8e8;
 font-size:21px;
 font-weight:bold;
 line-height:1.22;
 text-align:center;
 text-shadow:1px 1px 3px #000;
 opacity:0;
 visibility:hidden;
 pointer-events:none;
 transition:opacity .18s ease, visibility 0s linear .18s;
}

#lessonStatus.isVisible{
 opacity:.96;
 visibility:visible;
 transition:opacity .18s ease;
}

#lessonStatus span{
 display:block;
 margin-top:3px;
 font-size:16px;
 font-weight:bold;
 color:#f5d184;
}

body.lessonStatusActive #timer{
 display:none;
}

#playerStats{

 position:absolute;

 left:2%;

 top:3%;

 color:white;

 font-size:20px;

 z-index:100;

}

#xpNudge{
 display:inline-grid;
 grid-template-columns:repeat(5,7px);
 gap:2px;
 margin-left:8px;
 vertical-align:1px;
 opacity:0;
 transform:translateY(2px);
 transition:opacity .25s ease, transform .25s ease;
}

#xpNudge span{
 width:7px;
 height:5px;
 border-radius:1px;
 background:rgba(255,248,232,.28);
 box-shadow:0 0 0 1px rgba(0,0,0,.3);
}

#xpNudge span.isFilled{
 background:#f3dfb7;
 box-shadow:0 0 5px rgba(243,223,183,.45);
}

#xpNudge.isVisible{
 opacity:.9;
 transform:translateY(0);
}

#xpNudge.isLevelUp span.isFilled{
 background:#d7a93e;
 box-shadow:0 0 7px rgba(215,169,62,.65);
}

#dragonSpeech{
  position:absolute;

 left:2%;
 top:43%;

 width:260px;
 max-height:52%;
 overflow:auto;

 padding:10px;

 background:rgba(255,255,255,0.9);

 border-radius:10px;

 color:black;

 font-size:14px;

 text-align:left;

 box-shadow:2px 2px 8px rgba(0,0,0,0.4);
 z-index:120;
  
}

#dragonSpeech.isCollapsed{
 display:none;
}

#lessonGuideToggle{
 position:absolute;
 left:2%;
 top:37.5%;
 display:none;
 min-width:40px;
 min-height:40px;
 padding:8px 10px;
 background:rgba(255,255,255,0.9);
 color:#24190f;
 border:2px solid rgba(142,107,58,.72);
 border-radius:8px;
 font-size:15px;
 font-weight:bold;
 text-align:center;
 z-index:121;
 box-shadow:2px 2px 8px rgba(0,0,0,0.35);
}

#lessonGuideToggle.isVisible{
 display:block;
}

#lessonGuideToggle.isVisible:not(.isCollapsed){
 left:calc(2% + 232px);
}

#lessonGuideToggle.isCollapsed{
 min-width:172px;
 text-align:left;
}

.speechTitle{

 font-size:18px;

 font-weight:bold;

}

.speechRow{

 display:flex;

 align-items:center;

 gap:8px;

 margin-bottom:4px;

}

.speechRow span{

 width:24px;

 text-align:center;

 flex-shrink:0;

}

#dragonFact{
 position:absolute;
 left:34.2%;
 bottom:8.2%;
 transform:none;
 display:block;
 width:520px;
 max-width:none;
 min-height:128px;
 padding:16px 18px 16px 0;
 box-sizing:border-box;
 background:linear-gradient(rgba(36,25,15,.95),rgba(20,14,9,.96));
 border:4px solid #8e6b3a;
 border-radius:8px;
 color:#fff8e8;
 font-size:15px;
 text-align:left;
 box-shadow:
  inset 0 0 0 2px rgba(255,248,232,.1),
  0 8px 18px rgba(0,0,0,.48);
 animation:none;
 transition:opacity .18s ease, visibility 0s linear .18s;
 z-index:118;
 overflow:visible;
}

@keyframes floatFact{

 0%{
  transform:translateX(-50%) translateY(0px);
 }

 50%{
  transform:translateX(-50%) translateY(-6px);
 }

 100%{
  transform:translateX(-50%) translateY(0px);
 }

}

#steinerEmotion{
 position:absolute;
 left:-20px;
 bottom:6px;
 top:auto;
 transform:none;
 width:150px;
 image-rendering:pixelated;
 z-index:2;
}

#dragonFactText{
 padding-left:156px;
 min-height:78px;
 padding-right:4px;
 display:grid;
 align-content:center;
 gap:8px;
 text-align:left;
 line-height:1.32;
 font-weight:bold;
}

#dragonFactText .steinerLead,
#dragonFactText .steinerBody{
 display:block;
}

#dragonFactText .steinerLead{
 color:#f5d184;
 font-size:17px;
 line-height:1.22;
}

#dragonFactText .steinerBody{
 color:#fff8e8;
 font-size:15px;
}

#roomNav{
 position:absolute;
 left:2%;
 top:15%;
 width:390px;
 display:grid;
 grid-template-columns:1fr 1fr;
 gap:10px;
 z-index:90;
}

#roomNav button{
 width:100%;
 min-width:0;
 padding:10px 13px;
 text-align:left;
 white-space:nowrap;
 overflow:hidden;
 text-overflow:ellipsis;
}

#backlogBtn{
 position:relative;
}

#backlogBtn.hasHallOfFameNews::after{
 content:"!";
 position:absolute;
 right:-8px;
 top:-8px;
 width:24px;
 height:24px;
 border-radius:50%;
 display:grid;
 place-items:center;
 background:#d7a93e;
 color:#17110a;
 border:2px solid #fff8e8;
 font-weight:bold;
 box-shadow:0 3px 8px rgba(0,0,0,.45);
}

#backlogBtn.hasHallOfFameNews::before{
 content:attr(data-hall-badge-label);
 position:absolute;
 left:calc(100% + 12px);
 top:50%;
 transform:translateY(-50%);
 width:250px;
 padding:8px 10px;
 border-radius:8px;
 background:rgba(255,248,232,.96);
 color:#24190f;
 border:2px solid rgba(142,107,58,.72);
 box-shadow:0 4px 12px rgba(0,0,0,.35);
 font-size:13px;
 line-height:1.25;
 white-space:normal;
 opacity:0;
 pointer-events:none;
 transition:opacity .16s ease;
}

#backlogBtn.hasHallOfFameNews:hover::before,
#backlogBtn.hasHallOfFameNews:focus-visible::before{
 opacity:1;
}

#schoolyardBtn{
 position:relative;
}

#honorBoardBtn{
 position:relative;
}

#schoolyardBtn.hasSchoolyardNews::after{
 content:"!";
 position:absolute;
 right:-8px;
 top:-8px;
 width:24px;
 height:24px;
 border-radius:50%;
 display:grid;
 place-items:center;
 background:#d7a93e;
 color:#17110a;
 border:2px solid #fff8e8;
 font-weight:bold;
 box-shadow:0 3px 8px rgba(0,0,0,.45);
}

#reportBtn{
 position:relative;
}

#reportBtn.hasReportNews::after{
 content:"!";
 position:absolute;
 right:-8px;
 top:-8px;
 width:24px;
 height:24px;
 border-radius:50%;
 display:grid;
 place-items:center;
 background:#d7a93e;
 color:#17110a;
 border:2px solid #fff8e8;
 font-weight:bold;
 box-shadow:0 3px 8px rgba(0,0,0,.45);
}

#releaseRadarBtn{
 position:relative;
}

#achievementBtn{

 position:relative;

}

#baklBox{
 position:absolute;
 right:2.4%;
 top:30.3%;
 width:25.8%;
 max-height:42.5%;
 overflow:auto;
 box-sizing:border-box;
 padding:12px;
 background:linear-gradient(rgba(29,40,45,.95),rgba(13,20,24,.96));
 color:#fff8e8;
 border:4px solid rgba(83,129,145,.84);
 border-radius:8px;
 box-shadow:
  inset 0 0 0 2px rgba(255,248,232,.08),
  0 8px 18px rgba(0,0,0,.5);
 z-index:116;
 font-size:12px;
}

#baklBox.isCollapsed{
 max-height:none;
 overflow:hidden;
}

.baklHeader{
 display:flex;
 align-items:center;
 gap:8px;
 margin-bottom:8px;
 cursor:pointer;
 user-select:none;
}

#baklBox.isCollapsed .baklHeader{
 margin-bottom:0;
}

.baklHeader::after{
 content:"\25be";
 margin-left:auto;
 font-size:14px;
 color:#f5d184;
}

#baklBox.isCollapsed .baklHeader::after{
 content:"\25b8";
}

.baklHeader img{
 width:66px;
 height:66px;
 object-fit:contain;
 image-rendering:pixelated;
 flex-shrink:0;
}

#baklBox.isCollapsed .baklGrid,
#baklBox.isCollapsed #baklAskBtn,
#baklBox.isCollapsed #baklResult,
#baklBox.isCollapsed .baklActions{
 display:none;
}

.baklGrid{
 display:grid;
 grid-template-columns:1fr;
 gap:6px;
}

.baklGrid label{
 display:flex;
 flex-direction:column;
 gap:3px;
 font-size:11px;
 font-weight:bold;
 color:#f5d184;
}

#baklBox select{
 width:100%;
 min-height:34px;
 padding:5px 6px;
 border-width:2px;
 font-size:12px;
}

#baklBox button{
 width:100%;
 min-height:36px;
 margin-top:7px;
 padding:7px 8px;
 font-size:12px;
}

.baklActions{
 display:grid;
 grid-template-columns:1fr;
 gap:6px;
 margin-top:7px;
}

#baklBox .baklActions button{
 margin-top:0;
}

#baklBox .baklSecondary{
 background:#fff8e8;
 color:#24190f;
 border:1px solid rgba(142,107,58,.75);
 box-shadow:0 2px 0 rgba(0,0,0,.2);
}

.baklRejectReasons{
 margin-top:7px;
 padding-top:8px;
 border-top:1px solid rgba(255,248,232,.24);
}

.baklRejectTitle{
 margin-bottom:6px;
 font-size:12px;
 font-weight:bold;
 color:#f5d184;
}

.baklRejectGrid{
 display:flex;
 flex-wrap:wrap;
 gap:6px;
}

#baklBox .baklRejectChip{
 width:auto;
 min-height:32px;
 margin-top:0;
 padding:6px 8px;
 background:#fff8e8;
 color:#24190f;
 border:1px solid rgba(142,107,58,.75);
 box-shadow:none;
 font-size:11px;
}

#baklResult{
 margin-top:8px;
 padding-top:8px;
 border-top:1px solid rgba(255,248,232,.24);
 line-height:1.35;
}

.baklTitle{
 font-size:22px;
 font-weight:bold;
 margin:2px 0 4px;
 line-height:1.15;
}

.baklIntro{
 margin-bottom:6px;
 font-weight:bold;
 color:#f5d184;
}

.baklRecommendationCard{
 padding:8px;
 margin-bottom:7px;
 border-radius:8px;
 background:rgba(255,248,232,.08);
 border:2px solid rgba(83,129,145,.72);
}

.baklKicker{
 font-size:12px;
 font-weight:bold;
 color:#f5d184;
}

.baklMeta{
 font-size:12px;
 line-height:1.35;
}

.baklCourseNote{
 margin:7px 0 5px;
 padding:7px 8px;
 border-radius:6px;
 background:rgba(255,248,232,.1);
 border:1px solid rgba(255,248,232,.22);
 font-size:12px;
 line-height:1.4;
}

.baklReasonList{
 margin:7px 0 5px;
 padding:7px 8px;
 border-radius:6px;
 background:rgba(255,248,232,.08);
 border:1px solid rgba(255,248,232,.18);
}

.baklReasonList span{
 display:inline-block;
 margin-top:3px;
}

.baklCourseNote span{
 display:inline-block;
 margin-top:3px;
}

.baklScoreGrid{
 display:grid;
 grid-template-columns:repeat(5,1fr);
 gap:4px;
 margin:6px 0;
}

.baklScoreGrid span{
 display:block;
 padding:4px 2px;
 border-radius:6px;
 background:rgba(255,248,232,.1);
 text-align:center;
 font-size:10px;
}

.baklNotice{
 margin-top:5px;
 color:#6b2a25;
 font-weight:bold;
}

.baklIntroOverlay{
 position:fixed;
 inset:0;
 z-index:5000;
 display:none;
 align-items:center;
 justify-content:center;
 padding:18px;
 box-sizing:border-box;
 background:rgba(7,10,7,.84);
}

.baklIntroOverlay.isVisible{
 display:flex;
}

.baklIntroFrame{
 position:relative;
 width:min(92vw,860px);
 max-height:92vh;
 display:flex;
 align-items:center;
 justify-content:center;
 cursor:pointer;
}

.baklIntroFrame img{
 display:block;
 width:100%;
 max-height:92vh;
 object-fit:contain;
 border:4px solid #8e6b3a;
 border-radius:8px;
 box-shadow:0 20px 50px rgba(0,0,0,.55);
 background:#111;
}

.baklIntroProgress{
 position:absolute;
 right:12px;
 bottom:12px;
 min-width:64px;
 padding:5px 8px;
 border-radius:6px;
 background:rgba(14,20,13,.78);
 color:#fff8e8;
 border:1px solid rgba(255,248,232,.55);
 font-size:13px;
 font-weight:bold;
 text-align:center;
}

#schoolyardBtn.isLockedFeature,
#achievementBtn.isLockedFeature,
#reportBtn.isLockedFeature{
 filter:grayscale(1);
 opacity:.68;
 border-style:dashed;
}

#schoolyardBtn.isLockedFeature::before,
#achievementBtn.isLockedFeature::before,
#reportBtn.isLockedFeature::before{
 content:attr(data-lock-label);
 position:absolute;
 right:8px;
 top:50%;
 transform:translateY(-50%);
 padding:3px 7px;
 border-radius:8px;
 background:#17110a;
 color:#fff8e8;
 border:1px solid rgba(255,248,232,.75);
 font-size:11px;
 font-weight:bold;
 box-shadow:0 3px 8px rgba(0,0,0,.45);
}

.controls{
 position:absolute;
 left:50%;
 top:36.7%;
 transform:translateX(-50%);
 width:420px;
 display:flex;
 flex-direction:column;
 align-items:center;
 gap:12px;
 text-align:center;
}

.controls button{
 padding:10px 14px;
 margin:0;
 min-width:104px;
}

.lessonActionBlock{
 display:grid;
 grid-template-columns:270px 116px;
 gap:12px;
 align-items:stretch;
 justify-content:center;
 width:100%;
}

.lessonSideActions{
 display:grid;
 grid-template-rows:1fr 1fr;
 gap:10px;
}

#startTimerBtn{
 width:100%;
 min-width:0;
 min-height:86px;
 font-size:24px;
 font-weight:bold;
 background:#2f5133;
}

#pauseTimerBtn,
#resetTimerBtn{
 width:100%;
 min-width:0;
 min-height:38px;
 padding-left:10px;
 padding-right:10px;
 font-size:15px;
}

.lessonTypeRow{
 display:flex;
 justify-content:center;
 gap:10px;
 width:100%;
}

#lessonType{
 width:255px;
 padding:10px 14px;
 margin:0;
 font-size:16px;
}

#lessonRunner{
 position:absolute;
 left:32%;
 right:32%;
 bottom:38.8%;
 height:78px;
 pointer-events:none;
 z-index:105;
 opacity:0;
 visibility:hidden;
 transition:opacity .2s ease, visibility 0s linear .2s;
}

body.lessonActive #lessonRunner{
 opacity:.96;
 visibility:visible;
 transition:opacity .2s ease;
}

#lessonTrack{
 position:absolute;
 left:0;
 right:0;
 bottom:21px;
 height:50px;
 border-bottom:4px solid rgba(243,223,183,.45);
}

.steiner-sprite{
 position:absolute;
 left:calc(var(--runner-progress, 0) * (100% - 62px));
 bottom:-4px;
 width:62px;
 height:71px;
 image-rendering:pixelated;
 object-fit:contain;
 transform-origin:bottom center;
 filter:drop-shadow(2px 3px 2px rgba(0,0,0,.55));
 opacity:0;
 transition:left .25s linear, opacity .25s ease;
}

body.lessonActive #runnerSteiner{
 opacity:1;
}

body.lessonJumping #runnerSteiner{
 animation:steinerJump .42s ease-out;
}

body.lessonActive #dragonFact{
 opacity:.94;
}

body.lessonRunning #dragonFact{
 opacity:0;
 visibility:hidden;
 pointer-events:none;
}

@keyframes steinerJump{
 0%{
  transform:translateY(0);
 }
 45%{
  transform:translateY(-18px);
 }
 100%{
  transform:translateY(0);
 }
}

.lessonCoin{
 position:absolute;
 bottom:12px;
 width:18px;
 height:18px;
 border-radius:50%;
 background:radial-gradient(circle at 35% 30%, #fff6a8 0 18%, #e5b33e 19% 58%, #9b641f 59% 100%);
 box-shadow:0 0 0 2px rgba(80,44,10,.55), 0 0 10px rgba(255,218,88,.45);
 transform:translateX(-50%);
 transition:opacity .2s ease, transform .2s ease;
}

.lessonCoin[data-step="1"]{
 left:33.333%;
}

.lessonCoin[data-step="2"]{
 left:66.666%;
}

.lessonCoin[data-step="3"]{
 left:100%;
}

.lessonCoin.isCollected{
 opacity:.18;
 transform:translateX(-50%) translateY(-16px) scale(.6);
}

#lessonCheckpoint{
 position:absolute;
 right:-2px;
 bottom:2px;
 width:5px;
 height:42px;
 border-radius:2px;
 background:#f3dfb7;
 box-shadow:0 0 8px rgba(255,248,232,.45);
}

#lessonLootCounter{
 position:absolute;
 left:50%;
 bottom:-30px;
 transform:translateX(-50%);
 min-width:122px;
 padding:4px 8px 5px;
 border-radius:8px;
 background:rgba(12,18,12,.74);
 color:#fff8e8;
 border:1px solid rgba(243,223,183,.4);
 font-size:11px;
 text-align:center;
 text-shadow:1px 1px 2px black;
}

.lessonCoinSlots{
 display:flex;
 justify-content:center;
 gap:8px;
 margin-bottom:2px;
}

.lessonCoinSlot{
 width:15px;
 height:15px;
 border-radius:50%;
 background:radial-gradient(circle at 35% 30%, rgba(255,248,184,.9) 0 16%, rgba(112,86,42,.45) 17% 58%, rgba(28,20,12,.55) 59% 100%);
 border:1px solid rgba(243,223,183,.36);
 box-shadow:inset 0 0 0 2px rgba(0,0,0,.18);
 opacity:.42;
}

.lessonCoinSlot.isFilled{
 background:radial-gradient(circle at 35% 30%, #fff6a8 0 18%, #e5b33e 19% 58%, #9b641f 59% 100%);
 border-color:rgba(255,246,168,.82);
 box-shadow:0 0 8px rgba(255,218,88,.45), inset 0 0 0 1px rgba(80,44,10,.35);
 opacity:1;
}

.lessonCoinCounterText{
 display:block;
 line-height:1.1;
}

#decision{

 display:none;

 position:fixed;

 left:50%;
 top:50%;

 transform:translate(-50%,-50%);

 width:520px;

 max-width:90vw;

 padding:25px;

 background:rgba(15,15,15,0.96);

 border:3px solid white;

 border-radius:16px;

 color:white;

  z-index:1500;
  max-height:min(88vh,760px);
  overflow:auto;
  overscroll-behavior:contain;
  touch-action:manipulation;

 text-align:center;

 box-shadow:
 0 0 30px rgba(0,0,0,0.8);

}

#decisionHeader{

 display:flex;

 align-items:flex-start;

 gap:20px;

 text-align:left;

 margin-bottom:20px;

}

#decisionSteiner{

 width:96px;

 image-rendering:pixelated;

 flex-shrink:0;

}

#decision button{

 display:block;

 width:100%;

 padding:18px;

 margin:12px 0;

 font-size:20px;

 cursor:pointer;

 border:0;
 border-radius:8px;
 background:var(--paper2);
  color:#151515;
  touch-action:manipulation;
 box-shadow:0 2px 0 rgba(0,0,0,.35);

}

.decisionButton{

 display:flex !important;

 flex-direction:column;

 align-items:flex-start;

 justify-content:center;

 text-align:left;

 min-height:90px;

}

.decisionMain{

 font-size:24px;

 font-weight:bold;

}

.decisionSub{

 font-size:14px;

 opacity:0.8;

 margin-top:6px;

 line-height:1.4;

}

.decisionReasonPanel{
 margin-top:10px;
 padding-top:12px;
 border-top:1px solid rgba(255,255,255,.2);
 text-align:left;
}

.decisionReasonPanel h3{
 margin:0 0 10px;
 font-size:18px;
}

.decisionReasonGrid{
 display:flex;
 flex-wrap:wrap;
 gap:8px;
}

#decision .decisionReasonChip{
 display:inline-flex;
 width:auto;
 min-height:36px;
 margin:0;
 padding:7px 10px;
 align-items:center;
 border:1px solid rgba(243,223,183,.55);
 background:#fff8e8;
 color:#24190f;
 font-size:13px;
 box-shadow:none;
}

#decision .decisionReasonChip.isSelected{
 background:#d7a93e;
 color:#17110a;
}

#decision .decisionReasonActions{
 display:flex;
 gap:8px;
 margin-top:12px;
}

#decision .decisionReasonActions button{
 flex:1;
 min-height:42px;
 margin:0;
 padding:8px 10px;
 font-size:14px;
}

.resetReasonPanel{
 position:fixed;
 inset:0;
 z-index:1400;
 display:grid;
 place-items:center;
 padding:16px;
 background:rgba(0,0,0,.45);
}

.resetReasonCard{
 width:min(360px,100%);
 padding:14px;
 border:3px solid rgba(142,107,58,.85);
 border-radius:8px;
 background:rgba(255,248,232,.97);
 color:#24190f;
 box-shadow:0 10px 28px rgba(0,0,0,.45);
}

.resetReasonCard h3{
 margin:0 0 10px;
 font-size:16px;
}

.resetReasonGrid{
 display:grid;
 grid-template-columns:1fr 1fr;
 gap:8px;
}

.resetReasonChip,
.resetReasonSkip{
 min-width:0;
 padding:8px 10px;
 font-size:12px;
}

.resetReasonSkip{
 width:100%;
 margin-top:10px;
 background:#6b5737;
}

#firstLessonOverlay{
 position:fixed;
 inset:0;
 z-index:1450;
 display:none;
 place-items:center;
 padding:16px;
 background:rgba(0,0,0,.45);
}

#firstLessonOverlay.sobDisplayGrid{
 display:grid;
}

#firstLessonCard{
 width:min(390px,100%);
 padding:18px;
 border:3px solid rgba(142,107,58,.9);
 border-radius:8px;
 background:rgba(255,248,232,.98);
 color:#24190f;
 box-shadow:0 12px 30px rgba(0,0,0,.48);
}

#firstLessonCard h2{
 margin:0 0 10px;
 font-size:22px;
}

#firstLessonCard p{
 margin:0;
 line-height:1.4;
 font-size:15px;
}

.firstLessonActions{
 display:flex;
 gap:10px;
 margin-top:16px;
}

.firstLessonActions button{
 flex:1;
 min-width:0;
}

.decisionTitle{

 color:white;

 font-size:24px;

 font-weight:bold;

 text-align:left;

 margin-top:8px;

}

#archive{
 position:absolute;
 right:2.4%;
 top:40.8%;
 width:25.8%;
 height:auto;
 min-height:0;
 overflow:hidden;
 box-sizing:border-box;
 padding:7px 9px;
 color:rgba(255,248,232,.9);
 font-size:12px;
 background:rgba(20,14,10,.58);
 border:1px solid rgba(142,107,58,.42);
 border-left:4px solid rgba(215,169,62,.64);
 border-radius:6px;
 box-shadow:
  inset 0 0 0 1px rgba(255,248,232,.035),
  0 4px 10px rgba(0,0,0,.22);
 z-index:112;
}

#baklBox:not(.isCollapsed) ~ #archive{
 display:none;
}

#archive h3{
 margin:0 0 5px;
 font-size:12px;
 color:rgba(245,209,132,.82);
 text-shadow:1px 1px 2px #000;
 letter-spacing:.01em;
}

#rows{
 display:grid;
 gap:1px;
 max-height:none;
 overflow:hidden;
}

table{
 width:100%;
 border-collapse:collapse;
 background:rgba(0,0,0,.25);
}
th,td{
 border:1px solid rgba(255,255,255,.2);
 padding:4px;
}

#achievementPopup{

 position:absolute;

 right:5%;
 bottom:5%;

 width:250px;

 padding:15px;

 background:rgba(0,0,0,0.9);

 color:white;

 border:2px solid gold;

 border-radius:10px;

 display:none;

 text-align:center;

 z-index:999;

}

#achievementPopup span{
 display:inline-block;
 transform:translateY(-3px);
 line-height:1.15;
}

#levelPopup{

 position:absolute;

 right:5%;
 bottom:5%;

 width:250px;

 padding:15px;

 background:rgba(0,0,0,0.9);

 color:gold;

 border:2px solid gold;

 border-radius:10px;

 display:none;

 text-align:center;

 z-index:999;

}

#musicBtn{
 position:absolute;

 right:-110%;
 top:-440%;

 min-height:auto;
 background:none;
 border:none;

 font-size:28px;

 cursor:pointer;

 z-index:999;

 padding:0;

 text-shadow:2px 2px 4px black;
 box-shadow:none;
}

#infoPopup{

 position:absolute;

 left:50%;
 top:15%;

 transform:translateX(-50%);

 min-width:300px;

 padding:15px 25px;

 background:rgba(0,0,0,0.9);

 color:white;

 border:2px solid #7b68ee;

 border-radius:10px;

 display:none;

 text-align:center;

 z-index:999;

}

#versionInfo{

 position:absolute;

 right:2%;
 bottom:3%;

 color:white;

 font-size:14px;

 text-align:right;

 opacity:0.75;

 text-shadow:1px 1px 3px black;

}

#sobSyncMount{

 position:absolute;

 right:2%;
 top:8.2%;

 width:48px;

 z-index:165;

}

body:not(.sob-sync-mobile) #sobSyncMount #sobSyncToggle{
 width:48px;
 min-width:48px;
 height:48px;
 min-height:48px;
 display:grid;
 grid-template-columns:1fr;
 place-items:center;
 gap:0;
 padding:0;
 position:relative;
 overflow:hidden;
 border-radius:10px;
 background:
  linear-gradient(180deg, rgba(255,248,232,.98), rgba(230,205,159,.98));
 color:#fff8e8;
 border:3px solid rgba(142,107,58,.9);
 box-shadow:
  inset 0 0 0 2px rgba(255,255,255,.35),
  inset 0 -7px 0 rgba(142,107,58,.18),
  0 3px 0 rgba(75,49,23,.7),
  0 7px 14px rgba(0,0,0,.35);
 text-shadow:none;
 line-height:1;
}

body:not(.sob-sync-mobile) #sobSyncMount #sobSyncToggle .sob-cloud-icon{
 display:grid;
 place-items:center;
 width:31px;
 height:27px;
 border-radius:7px;
 background:linear-gradient(180deg,#243c2a,#132518);
 color:#fff8e8;
 font-size:20px;
 line-height:1;
 text-align:center;
 box-shadow:
  inset 0 0 0 1px rgba(255,248,232,.16),
  0 2px 0 rgba(0,0,0,.45);
 transform:translateY(-1px);
 filter:drop-shadow(0 1px 0 rgba(0,0,0,.35));
}

body:not(.sob-sync-mobile) #sobSyncMount #sobSyncToggle::after{
 content:"";
 position:absolute;
 right:6px;
 bottom:6px;
 width:8px;
 height:8px;
 border-radius:50%;
 background:#d7a93e;
 box-shadow:
  0 0 0 2px rgba(255,248,232,.88),
  0 0 6px rgba(215,169,62,.75);
}

body:not(.sob-sync-mobile) #sobSyncMount #sobSyncToggle:hover{
 transform:translateY(-1px);
}

body:not(.sob-sync-mobile) #sobSyncMount #sobSyncToggle:active{
 transform:translateY(1px);
 box-shadow:
  inset 0 0 0 2px rgba(255,255,255,.28),
  inset 0 -4px 0 rgba(142,107,58,.16),
  0 2px 0 rgba(75,49,23,.7),
  0 4px 10px rgba(0,0,0,.32);
}

body:not(.sob-sync-mobile) #sobSyncMount #sobSyncToggle .sob-cloud-title,
body:not(.sob-sync-mobile) #sobSyncMount #sobSyncToggle .sob-cloud-copy{
 display:none;
}

.privacyLink{
 position:absolute;
 left:50%;
 bottom:2%;
 transform:translateX(-50%);
 color:white;
 font-size:14px;
 text-shadow:1px 1px 3px black;
 z-index:120;
}

#welcomePopup{

 position:fixed;

 inset:0;

 background:rgba(0,0,0,0.75);

 display:none;

 justify-content:center;

 align-items:center;

 z-index:99999;

}

#welcomeContent{

 width:min(750px,90vw);

 max-height:92vh;

 font-size:14px;

 overflow:auto;

 background:white;

 color:black;

 padding:20px 24px;

 border-radius:12px;

}

#welcomeHeader{

 display:flex;

 align-items:center;

 gap:20px;

 margin-bottom:12px;

}

#welcomeSteiner{

 width:96px;

 image-rendering:pixelated;

 flex-shrink:0;

}

#welcomeContent button{

 display:block;

 margin:20px auto 0 auto;

 padding:10px 20px;

 cursor:pointer;

 font-size:16px;

}

#welcomeContent p{
 margin:10px 0;
 line-height:1.35;
}

#languageBtn{
 position:absolute;
 right:2%;
 top:2%;
 min-width:96px;
 padding:8px 10px;
 z-index:160;
 background:rgba(255,248,232,.94);
 color:#151515;
 border:1px solid rgba(142,107,58,.7);
 border-radius:8px;
 font-weight:bold;
 cursor:pointer;
 box-shadow:2px 2px 8px rgba(0,0,0,.35);
}

#helpBtn{
 position:absolute;
 right:2%;
 top:14.6%;
 width:48px;
 min-width:48px;
 height:48px;
 min-height:48px;
 padding:0;
 z-index:160;
 background:rgba(255,248,232,.94);
 color:#151515;
 border:1px solid rgba(142,107,58,.7);
 border-radius:8px;
 font-size:24px;
 font-weight:bold;
 cursor:pointer;
 box-shadow:2px 2px 8px rgba(0,0,0,.35);
}

#mobileBtn{
 position:absolute;
 right:2%;
 top:21%;
 min-width:96px;
 padding:8px 10px;
 z-index:160;
 background:rgba(255,248,232,.94);
 color:#151515;
 border:1px solid rgba(142,107,58,.7);
 border-radius:8px;
 font-weight:bold;
 cursor:pointer;
 box-shadow:2px 2px 8px rgba(0,0,0,.35);
}

.welcomeTopActions{
 display:flex;
 justify-content:flex-end;
 margin-bottom:8px;
}

.welcomeLangBtn{
 min-height:40px;
 padding:8px 12px;
 background:rgba(255,248,232,.96);
 color:#151515;
 border:1px solid rgba(142,107,58,.7);
 border-radius:8px;
 font-weight:bold;
 box-shadow:0 2px 0 rgba(0,0,0,.25);
}

#welcomeContent .welcomeTopActions .welcomeLangBtn{
 display:inline-block;
 width:auto;
 margin:0;
}

.feedbackLink{
 color:white;
}

.isHidden{
 display:none;
}

.welcomeBeta{
 font-size:14px;
 color:#666;
}

.archiveEntry{
 margin:0;
 min-height:20px;
 padding:2px 4px;
 box-sizing:border-box;
 display:grid;
 grid-template-columns:minmax(0,1fr) auto;
 align-items:center;
 gap:6px;
 background:transparent;
 border:0;
 border-top:1px solid rgba(255,248,232,.09);
 border-radius:0;
 line-height:1.15;
 color:#fff8e8;
}

.archiveEntry:first-child{
 border-top:0;
}

.archiveGame,
.archiveResult{
 min-width:0;
 overflow:hidden;
 text-overflow:ellipsis;
 white-space:nowrap;
}

.archiveGame{
 font-weight:normal;
 opacity:.9;
}

.archiveResult{
 color:rgba(245,209,132,.88);
 text-align:right;
 font-size:11px;
 font-weight:normal;
}

#steinerEmotion{
 transition:transform .15s ease;
}

#steinerEmotion.steinerBounce{
 transform:scale(1.08);
}

#utilityBar{
 position:absolute;
 right:2%;
 top:2%;
 display:flex;
 align-items:center;
 gap:8px;
 padding:6px;
 z-index:190;
 border:1px solid rgba(255,248,232,.26);
 border-radius:12px;
 background:rgba(24,28,20,.32);
 box-shadow:0 8px 18px rgba(0,0,0,.26);
 backdrop-filter:blur(2px);
}

#utilityBar #musicBtn,
#utilityBar #languageBtn,
#utilityBar #helpBtn,
#utilityBar #mobileBtn{
 position:static;
 right:auto;
 top:auto;
 transform:none;
 display:grid;
 place-items:center;
 height:48px;
 min-height:48px;
 margin:0;
 padding:0;
 border:2px solid rgba(142,107,58,.74);
 border-radius:10px;
 background:rgba(255,248,232,.95);
 color:#151515;
 box-shadow:
  inset 0 0 0 1px rgba(255,255,255,.45),
  0 3px 0 rgba(75,49,23,.55),
  0 7px 14px rgba(0,0,0,.24);
 text-shadow:none;
 cursor:pointer;
}

#utilityBar #musicBtn,
#utilityBar #helpBtn{
 width:48px;
 min-width:48px;
 font-size:24px;
 font-weight:bold;
 line-height:1;
}

#utilityBar #languageBtn{
 min-width:82px;
 padding:0 12px;
 font-size:18px;
 font-weight:bold;
}

#utilityBar #mobileBtn{
 min-width:88px;
 padding:0 13px;
 font-size:18px;
 font-weight:bold;
}

#utilityBar #sobSyncMount{
 position:static;
 right:auto;
 top:auto;
 width:48px;
 height:48px;
 z-index:auto;
 padding:0;
 border:0;
 background:transparent;
 box-shadow:none;
}

#utilityBar #sobSyncMount #sobSyncToggle{
 position:static;
 width:48px;
 min-width:48px;
 height:48px;
 min-height:48px;
 display:grid;
 grid-template-columns:1fr;
 place-items:center;
 gap:0;
 overflow:hidden;
 padding:0;
 text-align:center;
}

#utilityBar #sobSyncMount #sobSyncToggle .sob-cloud-title,
#utilityBar #sobSyncMount #sobSyncToggle .sob-cloud-copy{
 display:none;
}

body:not(.sob-sync-mobile) #utilityBar #sobSyncMount #sobSyncToggle{
 width:48px;
 min-width:48px;
 height:48px;
 min-height:48px;
}

#utilityBar #musicBtn:hover,
#utilityBar #languageBtn:hover,
#utilityBar #helpBtn:hover,
#utilityBar #mobileBtn:hover,
body:not(.sob-sync-mobile) #utilityBar #sobSyncMount #sobSyncToggle:hover{
 transform:translateY(-1px);
}

#utilityBar #musicBtn:active,
#utilityBar #languageBtn:active,
#utilityBar #helpBtn:active,
#utilityBar #mobileBtn:active,
body:not(.sob-sync-mobile) #utilityBar #sobSyncMount #sobSyncToggle:active{
 transform:translateY(1px);
}